Skompilowany kontroler i interpolacja Angularjs

Question

Na zobaczyłem przykład kompilowania "czegoś" dodanego później.

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); 
}); 

Dodałem ten kod w jquery gotowy funkcji, ale mam dwa problemy:

Pierwszy jest błąd: Argument 'MyCtrl' is not a function, got undefined.

Po drugie, nie wiem jak sprawić, aby ta content.label zadziałała! Dodałem go do scope, ale to nie działa. Jak mam zadzwonić do kontrolera, aby zobaczyć, jak działa powiązanie danych pod numerem content.label?

mój ostatni zmodyfikowany kod IS:

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

Należy rozpocząć cykl digest po kompilacji nowych znaczników, w celu zbudowania wszystkie powiązania i obserwatorów pożarowych. Można to zrobić dzwoniąc scope.$digest();:

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

Wynik powinien wyglądać następująco:

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