javascript - AngularJS - ng-repeat - conditionally append html -

dear programmers while trying learn angular.js i've stumbled on problem cant solve myself. therefore kindly ask :) start apologise less optimal code... i've started 'adventure' javascript , angular.js :/

i trying write 'simple' webapp present following functionality:

i have list of nodes

<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">     <a ng-click="appendchassis()">{{node.nazwa}}</a>     <button class="btn"><i class="icon-plus-sign"></i> add</button>     <div some-stuff="mytoggle($index)" class="somestuff" id="dupa{{node.id}}"></div> </div> 

those nodes come db query. each node has number of devices in it. after clicking on name of device

<a ng-click="appendchassis()">{{node.nazwa}}</a> 

through

$scope.appendchassis = function() {      var index = this.$index;     $scope.myindex = index;     $scope.chassis = chassis.query({nodeid: $scope.nodes[index].id});  } 

i make query db list of devices belonging node. after want append list div under tag.

i trying achieve such functionality using directive

var powiadomienia = angular.module("powiadomienia",["ngresource"]). config(function($routeprovider) {     $routeprovider.         when('/', { controller: listctrl, templateurl: 'list.html' }).         //when('/tt/:ttid', { controller: listtt, templateurl: 'ttlist.html' }).         otherwise({ redirectto: '/' }); }).directive('somestuff', function () {     return {         restrict: 'e,a',         transclude: true,         templateurl: 'chassies.html',         scope: true,          //link: function($scope, $element, $attrs, $controller) {         link: function(scope, element, attrs, controller) {                 $scope.chassis_instance.query({nodeid: $scope.nodes[$scope.myindex].id});                  if(scope.$eval(attrs.somestuff)) {                     // remove '<div ng-if...></div>'                     element.replacewith(element.children())                 } else {                     element.replacewith(' ')                 }             }      } }); 

this solution works partially, meaning when click on node link, query made , list of devices (chassis) applied dom, chassies appended somestuff elements residing in ng-repeat. wrong because want chassies applied 1 particular, clicked node.

i don't think need directive. think can simple ng-repeat on node.chassies or create separate object contains them if want, chassies[nodeid]. similar following might out:

<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">     <a ng-click="appendchassis(node)">{{node.nazwa}}</a>     <button class="btn"><i class="icon-plus-sign"></i> add</button>     <div some-stuff="mytoggle($index)" class="somestuff" id="dupa{{node.id}}">        <a href='' ng-repeat='device in node.chassies'>{{device.name}}</a>     </div> </div>   $scope.appendchassis = function(node) {      $scope.chassis = chassis.query({nodeid: node.id}).then(function(data) {        node.chassies = data;     });    } 

i created small demo might out.

http://plnkr.co/edit/y8ljusc55ziur478sxvl?p=preview

it has lot of files ones used demo app.js, view1.html, service-utils.js, , index.html.