javascript - AngularJS component with $compile loses $scope -

i have directive loads angularjs (v1.2.16) components dynamically. requests list of components webapi, loads files told to, , uses $compile compile components.

however, components lose $scope after initial load! if have ng-click event in component, flat out refuses fired!

this directive inside main js file:

var myapp = angular.module(.......);  myapp.directive('components', function($compile, $http) {     return {         restrict: 'a',         link: function (scope, element) {             $http.get('myapi/getlistofcomponents').success(function(components) {                 var scripts = array();                var templates = array();                 angular.foreach(components, function (component, key) {                    if (component.javascript !== null) {                        // path js file dynamically load                        scripts.push(widget.javascript);                    }                });                 // load js file components                // i'm using dynamic loader found here: https://github.com/ded/script.js (it's old, works)                $script(scripts, function () {                    angular.foreach(widgets, function (widget, key) {                        templates.push(                            // raw html contents of component                            $http.get(widget.template).success(function (componenthtmlcontent) {                                element.append('<div class="component">' + componenthtmlcontent + '</div>');                                $compile(element.contents())(scope);                            }));                    });                });             });         }     } }); 

and example component's template:

<div ng-controller="mycomponentcontroller">     <h2>{{myheading}} - {{myinlinefunction()}} - {{somevalue}}</h2>     <button ng-click="myclickfunction()">button</button> </div> 

and component's script

servicewebapp.controllerprovider('mycomponentcontroller', function ($scope, $http) {      $scope.somevalue = "foo";      $http.get('/myapi/getsomedata').success(function (data) {         $scope.myheading = data;     });      $scope.myinlinefunction = function() {         return "someinlinevalue";     }      $scope.myclickfunction = function() {         alert('something clicked');     } }); 

when page loads, both myinlinefunction , $http.get called fine, , bindings in template ({{myheading}} - {{myinlinefunction()}} - {{somevalue}}) correct values.

the button, on other hand, refuses work. myclickfunction never called.

i've tried @ contents of controller's scope using following command in browser developer console:

angular.element($("div[ng-controller~='mycomponentcontroller']")).scope()

the scope returned not contain somevalue, or other values/functions defined in scope.

so seems $compile works 1 time, , fails keep track of scope.

what going on here, , how can fix it?

the problem here use jquery move around elements in dom. when move component had been initialized, lost connection scope.

another thing noticed when debugging first component got initialized thrice, second 2 times, , third 1 time. (or "4,3,2,1" if there 4 components). because $compile(element.contents())(scope); inside foreach, , each subsequent component loaded multiple times.

the solution move recompilation below jquery, while moving inside block run when html content has promised loaded.

a working plunker can seen here: http://plnkr.co/edit/zgngxb9n3ssoiujjx5n4?p=preview