javascript - AngularJS: How to access directive controller's $scope properties in HTML -

i have written angularjs directive displaying tables. used these tables on few pages , wokred awesome, , have page need 2 instances of such table. new angularjs , maybe wasn't best choise in first place far used controllers scope these tables , directives. , when comes having 2 tables, act same table when change page 1 table, other 1 gets page changed either, because share same scope (controller's scope).

i added scope property directive declaration accept items(this should common both tables) controller , within directive's controller declared filtereditems(this should not common, each table should have own filtered items list) property of directive's scope.

now controller goes like:

function ($scope, sgtservice, ...) {     sgtservice.getlist(function (data) {         $scope.items = data;     });      ... } 

my directive declaration is:

abtable: function () {     return {         restrict: "a",         scope: {             items: '='         },         controller: function ($scope, $filter) {             $scope.filtereditems = [];              $scope.$watch('items', function () {                 $scope.search();             });              $scope.search = function () {                 $scope.filtereditems = $filter("filter")($scope.items, $scope.searchkeywords);             }              ...         }     }; } 

and html is:

<div data-ab-table="" data-items="items">      ...      <tbody>         <tr data-ng-repeat="item in filtereditems">          </tr>     </tbody>      ...  </div> 

directive's controller executes fine did before, problem reason in html can't access properties directive's isolated scope , can't access these filtereditems. if replace data-ng-repeat="item in filtereditems" data-ng-repeat="item in items" displays content because view controller's scope has property item won't iterate through filtereditems property of directive's scope. , none other directive's scope properties can accessed there, checked scope id within directive html content , matches id of view's controller scope. why within directive's html dealing view controller's scope , not directive's isolated scope?

i have tweaked example, here's result:

http://jsfiddle.net/nmakarov/e5dm3/4/

basically, consists of following:

• a mytable directive, takes items array , produces table 2 rows - original numbers , odd (filtered) numbers
• a dataproducer service, produces array of 10 elements - each 1 calculates index times provided multiplier.
• controller couple of arrays, couple of multipliers , corresponding watchers.

it works so: click on button, changes corresponding multiplier, controller's watcher updates corresponding data row, directive's watcher kicks in (because data row changes) , invokes $scope.search() , modifies local scope's filtereddata property. 2 instances of directive present on page, , no scope clashing happens.

and if i'm not mistaken, you're trying access properties belonged directive's scope outside's html. won't work - no way. if there's calculated inside directive , outside world needs access - move logic controller.