title: Angular: using transclude with ng-bind-html
body: <p>I have the following <strong>angular</strong> setup:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
  });
  
  app.controller('SearchController', ['$scope', '$http', function($scope, $http) {
    $scope.searchString = '';
    $scope.searchType = 'Artist';
    $scope.updateHtml = function() {
      $http.get('/search', {
        params: {
          searchString: $scope.searchString,
          searchType: $scope.searchType
        }
      }).success(function(data) {
        $scope.html = data;
      }).error(function(err){
        $scope.html = err;
      });
    };
    $scope.updateHtml(); 
  }]);
  
  app.directive('searchDirective', function() {
    return {
      restrict: 'A',
      transclude: true,
      template: '&lt;div ng-bind-html="html | unsafe" ng-transclude&gt;&lt;/div&gt;'
    };
  });
  </code></pre>
  
  <p>It pulls raw html markup through ajax in the controller and stores it in <code>@scope.html</code>. In the directive, this html is inserted into the DOM through <code>ng-bind-html</code>.</p>
  
  <p>The <strong>html</strong> (jade) looks as follows:</p>
  
  <pre><code>#search(ng-controller="SearchController" search-directive)
  </code></pre>
  
  <p>It basically works. But inside this html that is included, i have some transclusive content, like <code>{{searchType}}</code> that i want to be resolved. Unfortunatly, that is not the case, it shows "{{searchType}}" in the browser. What can i change to make the transclusion work?</p>
  
  <p>I read about <code>$compile</code> and <code>$transclude</code>, but i don't know how to use it or if it can help me solve my issue. thx!</p>