Angularjs范围观察如何获取数组动态数据？

Question

这是我的控制器：

 $scope.datas=[{item:[
             {name:"owl1.jpg",id:1},{name:"owl6.jpg",id:6}]}];

$scope.demo=function(){
            $scope.datas.push({
                 item:[
                        {name:"owl1.jpg",id:1},{name:"owl2.jpg",id:2}
                       ]
                });         
    };  

指令：

 sampleApp.directive("imagedata", function ($compile) {
    return {restrict: "E", link: function (scope, element, attrs) {
            scope.$watch(attrs.value, function(newValue) {  
            element.html("<img src=./img/"+newValue.name+">");
            $compile(element.contents())(scope);
            });
        }
    };
});

索引页：

 <div class="col-md-9" ng-controller="AddOrderController">
    <button ng-click="demo()">Update</button>       
    <div class="owl-demo" class="owl-carousel" ng-repeat="a in datas">     
    <div class="item"  ng-repeat="d in a.item track by $index">
      <imagedata value="d"></imagedata>
     </div> 
    </div>
    </div>

工作正常。但点击演示功能我按下数组中的项目。但范围观察不是wokrking。