Dynamically added element's directive doesn't work

Question

I'm trying to build a simple infinite scroll. It loads the data fine but after loading, new added elements' directives don't work.

This is relevant part of the scroll checking and data loading directive.

.directive("scrollCheck", function ($window, $http) {
     return function(scope, element, attrs) {
          angular.element($window).bind("scroll", function() {           
                // calculating windowBottom and docHeight here then
                if (windowBottom >= (docHeight - 100)) {
                    // doing some work here then            
                    $http.get('service page').then(function (result) {
                        if (result.data.trim() != "") {
                            var newDiv = angular.element(result.data);  
                            element.append(newDiv);                                                             
                        } 
                        // doing some other work
                    },function () {
                        // error handling here
                    });                                 
                }                    
                scope.$apply();
          });
     };
})

Service page returns some repeats of this structure as result.data

<div ...>
    <div ... ng-click="test($event)"></div>
    <div ...>...</div>
</div>

As i said data loads just fine but those test() functions in ng-clickdirectives don't work. How to get em work?

Answer 1

I believe you are going to need to compile the html element returned. Something like this

         $compile(newDiv)(scope);  // Corrected. Thanks

You'll need to be sure and pass in $compile into your function