javascript - Custom directive value with bindonce in Angularjs -

i got ng-repeat thousands of item in it, decided tryout bindonce reduce number of watches. couldn't figure out how use properly. got following code:

<div ng-repeat="card in cards">       <div class="item-box" draggable="{{card.category}}" itemid="{{card._id}}">        <img ng-src="{{card.image}}" width="100%" height="100%">     </div> </div> 

as read in bindonce doc, should add directive , use bo-* directives, fugured out this:

 <div ng-repeat="card in cards" bindonce>       <div class="item-box" draggable="{{card.category}}" itemid="{{card._id}}">        <img bo-src="card.image" width="100%" height="100%">     </div> </div> 

so question how can use {{card.category}} , {{card._id}} using bind-once?

bo-attr bo-attr-draggable="card.category" bo-attr-itemid="card._id" 

seems not work, i'm not getting errors, nothing happens.

result looks

<div class="item-box ng-scope" bo-attr="" bo-attr-draggable="card.category" bo-attr-itemid="card._id" draggable="pants" itemid="m--pi"> 

bo-attr doesn't seem want doing, want directive evaluate , bind data without creating watches. made plnkr think want: http://plnkr.co/edit/sfpajlrckduxu5uim1u1?p=preview

app.controller('mainctrl', function($scope) {   $scope.name = 'world';  });  // html <div directive="name"></div> // dummy directive app.directive('directive', function() {   return {     template: '<div bindonce bo-text="val"></div>',     compile: function() {       return {         pre: function(scope, elt, attrs) {           scope.val = scope.$eval(attrs.directive);         }       };     }   } }) 

woo no watches!

let me know if misunderstood something.