javascript - $watch is not defined in side a $compile(cutsom directive) but scope is available in the controller but not in the template -

i trying compile directive $compile method following error occurring. want long listing lazy load 1 time binding functionality out iterating entire array

the code below:

app.directive('lazydata', function() { return {     controller: ['$scope', function($scope) {         $scope.sample = 'sample';     }],     replace: true,     template: '<span ng-bind="favoritefruit">sample {{favoritefruit}}      </span>' }});  app.directive('lazyload', function($compile) { return {     scope: {         pdata: "@pagenationdata",         options: "@options"     },     transclude: true,     controller: ['$scope', '$element', function(scope, ele) {         var pdata = json.parse(scope.pdata);         options = angular.extend({                 itemsperpage: 10,                 buttons: false             }, scope.options),             compile = $compile;         var loadmore = function() {             console.log(options.itemsperpage);             scope.tmparr = pdata.splice(0, options.itemsperpage);             console.log(scope.tmparr);             (var = 0; < options.itemsperpage; i++) {                 ele.find("#pagenationdata").append(compile('<lazy-data></lazy-data>')(scope.tmparr[i]));             }         };         ele.find('#loadmorebutton').on('click', loadmore);     }],     replace: true,     template: [         '<div>',         '<div id="pagenationdata"></div>',         '<div id="loadmorebutton">loadmore</div>',         '</div>'     ].join('') }; });