I am in new in angularjs1 using grid table in our form.I want to tree view in one form

I want need in tree view using angular js. I was taken one main tabe is a company, First one is u can click company tab can display the tree it's mean business tree and grid and can click business tab display the another tree and grid table and company tab also a grid table in the sidebar .Please give me a solution in the app.

Please follow the below code. module.html

<div class="col-sm-2" id="left-tab">
    <ul class="nav nav-tabs-left" style="padding:0px;" >
         <li  ui-sref-active="active" ng-controller="BusinessCtrl">
           <a ui-sref="module.business" id="busmod">
              <a ui-sref="module.branch" id="busmod">       

           <tree src="categories"></tree></a></a></li>

app.js

 $scope.categories = {
    children: [
      {
        name: "Business",
        children: [
          {
            name: "Branch",
            children: [
              {
                name: "Line1",

              },
              {
                name: "topup2"
              }
            ]
          },
          {
            name: "Branch2",
            children: [
              {
                name: "Line2"
              },
              {
                name: "topup2"
              }
            ]
          }
        ]
      },

    ]
  };  

}
app.directive('tree', function() {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <tree>
    replace: true, // tells Angular to replace <tree> by the whole template
    scope: {
      t: '=src' // create an isolated scope variable 't' and pass 'src' to it.  
    },    
    template: '<ul><branch ng-repeat="c in t.children" src="c"></branch></ul>'    
  };
})

app.directive('branch', function($compile) {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <branch>
    replace: true, // tells Angular to replace <branch> by the whole template
    scope: {
      b: '=src' // create an isolated scope variable 'b' and pass 'src' to it.  
    },    
    template: '<li><a></a></li>',
    link: function(scope, element, attrs) {
      //// Check if there are any children, otherwise we'll have infinite execution

      var has_children = angular.isArray(scope.b.children);

      //// Manipulate HTML in DOM
      if (has_children) {        
        element.append('<tree src="b"></tree>');

        // recompile Angular because of manual appending
        $compile(element.contents())(scope); 
      }

      //// Bind events 
      element.on('click', function(event) {
          event.stopPropagation();          

          if (has_children) {
            element.toggleClass('collapsed');
          }
      });      
    }
  };
})

via Yamini Sankar