jquery - AngularJS - Styles not applying on appended html -

i want inject html result of rendering django template. django template:

class cview(view):     def get(self, request):         return render_to_response('my_template.html', {},content_type="application/json") 

the resulted html displays correctly when hardcoded. want inject received html code div. problem bootstrap accordion component doesn't display. text.

code in angular controller:

$scope.myhtml = '<div>loading..<div>'; $scope.to_trusted = function (html_code) {     return $sce.trustashtml(html_code); } dataservice.getmyhtml().success(function (data) {     $timeout(function () {         $scope.$apply(function () {             $scope.myhtml = data;         })     }, 0); }).error(); 

html code:

 <div ng-bind-html="to_trusted(myhtml)"></div> 

myhtml holds this:

<div class="col-sm-3 col-md-2 sidebar">     <accordion close-others="true">         <accordion-group>             <accordion-heading>                 items 1 <i class="pull-right glyphicon"                            ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>             </accordion-heading>             <ul class="nav nav-sidebar">                 <li><a href="#/one">one 1</a></li>                 <li><a href="#/two">one 2</a></li>             </ul>         </accordion-group>          <accordion-group>             <accordion-heading>                 items 2 <i class="pull-right glyphicon"                            ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>             </accordion-heading>             <ul class="nav nav-sidebar">                 <li><a href="#/one">two 1</a></li>                 <li><a href="#/two">two 2</a></li>             </ul>         </accordion-group>          </accordion> </div> 

the above code renders vertical list menu, no accordion. same code renders fine if loaded static html file. using angular's bootstrap.

there 2 possible answers problem:

demo

[1] if dataservice.gethtml() requesting data server url returns html, , not manipulating html in service, can safely use ng-include directive:

<div ng-include="'http://somewhere/mytemplate.html'"></div> 

if case, don't need use $compile service , manually add in html.

[2] if dataservice not require request server , building html content inside service itself, need use $compile service. this, need create directive compiles html content , manually add html itself.

html

<div compile-html="html"></div> 

javascript

  .service('dataservice', function($http, $q) {     this.gethtml = function() {       var deferred = $q.defer();       $http.get('accordion.tpls')         .success(function(template) {           deferred.resolve(template + '<h1>added html in here</h1>');         }, deferred.reject);       return deferred.promise;     };   })    .controller('ctrl', function($scope, dataservice) {      dataservice.gethtml().then(function(template) {       $scope.html = template;     });    })     .directive('compilehtml', function($compile) {     return function(scope, elem, attr) {       scope.$watch(attr.compilehtml, function(value) {         if(value) {           elem.html(value);           $compile(elem.contents())(scope);         }       });     }   });