Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ArticlesCtrl">
    <h1>Hello Plunker!</h1>
    
    <node-list ng-model="policies" delete-policy="deletePolicy(node_item)" edit-policy="editPolicy(node_item)"></node-list>
  </body>

</html>

// Code goes here

var app = angular
    .module('myApp', []);

angular.module('myApp')
  .directive('nodeList', function($compile) {
    return {
      restrict: 'E',
      terminal: true,
      scope: {
        nodes: '=ngModel',
        deleteArticle: '&',
        editArticle: '&'
      },
      link: function($scope, $element, $attrs) {
        if (angular.isArray($scope.nodes)) {
          $element.append('<accordion close-others="true"><node ng-repeat="item in nodes" ng-model="item" delete-article="deleteArticle(node_item)" edit-article="editArticle(node_item)"></node></accordion>');
        }
        $compile($element.contents())($scope.$new());
      }
    };
  })

.directive('node', function($compile) {
  return {
    restrict: 'E',
    terminal: true,
    scope: {
      node: '=ngModel',
      deleteArticle: '&',
      editArticle: '&'
    },
    link: function($scope, $element, $attrs) {
      if (angular.isArray($scope.node.Options) && $scope.node.Options.length > 0) {
        $element.append('<accordion-group><accordion-heading>{{node.Title}}   <a href=\"javascript:void(0)\" ng-click=\"editArticle({node_item: node})\" data-toggle=\"modal\" data-target=\"#new-article\" class=\"action\"><i class=\"glyphicon glyphicon-edit\"></i></a></accordion-heading><node-list ng-model="node.Options"></node-list>{{node.Content}}</accordion-group>');
      } else {
        $element.append('<accordion-group><accordion-heading>{{node.Title}}   <a href=\"javascript:void(0)\" ng-click=\"editArticle({node_item: node})\" data-toggle=\"modal\" data-target=\"#new-article\" class=\"action\"><i class=\"glyphicon glyphicon-edit\"></i></a></accordion-heading>{{node.Content}}</accordion-group>');
      }
      $compile($element.contents())($scope.$new());
    }
  };
})


angular.module('myApp')
  .controller('ArticlesCtrl', ['$http', '$scope',
    function($http, $scope) {
      $scope.getArticles(1, "");
      $scope.getArticles = function(company) {
        $http.get("https://api.myjson.com/bins/4783b", {
          headers: {
            'Content-Type': 'application/json',
            'If-Modified-Since': ''
          }
        })
          .success(function(response) {
            $.each(response, function(ind, el) {
              $scope.articles.push(el);
              $scope.loadingIsDone = true;
            });
            $scope.numItems();
          })
          .error(function(err, status) {
            console.log('operation failed, status: ' + status);
          });
      };

      $scope.editArticle = function(vArticle) {
        console.log("edit" + vArticle);
      };
    }
  ])

/* Styles go here */