angularjs compile ng-controller e interpolazione

Question

On the docs Ho visto un esempio di compilazione di "qualcosa" aggiunta in seguito.

var $div = $('<div ng-controller="MyCtrl">{{content.label}}</div>'); 
$(document.body).append($div); 

angular.element(document).injector().invoke(function($compile) { 
    var scope = angular.element($div).scope(); 
    $compile($div)(scope); 
}); 

ho aggiunto questo codice su una funzione pronta jQuery, ma ho due problemi:

primo è un errore: Argument 'MyCtrl' is not a function, got undefined.

Il secondo è che non so come farlo funzionare content.label! L'ho aggiunto allo scope ma non funziona. Come dovrei chiamare il mio controller per vedere il working data binding di content.label?

MY codice modificato finale è:

var app = angular.module('app',[]); 

    $(function(){ 

     app.controller('MyCtrl',function($scope){ 
      $scope.content = 123; 
     }); 

     var $div = $('<div ng-controller="MyCtrl">{{content}}</div>'); 
     $(document.body).append($div); 

     angular.element(document).injector().invoke(function($compile) { 
      var scope = angular.element($div).scope(); 
      $compile($div)(scope); 
     }); 

    }); 

Answer 1

UPDATE

Si dovrebbe iniziare un ciclo di digest dopo la compilazione nuovo markup, al fine di costruire tutti gli attacchi e gli osservatori del fuoco. Questo può essere fatto chiamando scope.$digest();:

$compile($div)(scope); 
scope.$digest(); 

Il risultato dovrebbe essere simile:

var app = angular.module('app',[]); 
    app.controller('MyCtrl',function($scope){ 
     $scope.content = 123; 
    }); 

    angular.element(document).ready(function() { 
     var $div = $('<div ng-controller="MyCtrl">{{content}} </div>'); 
     $(document.body).append($div); 

     angular.element(document).injector().invoke(function($compile) { 
     var scope = angular.element($div).scope(); 
     $compile($div)(scope); 
     scope.$digest(); 
     }); 

    }); 

http://plnkr.co/edit/dDNBxf8SowKTPgnVj0tF?p=preview