How to use ng-grid with ng-tree in angular js?-Collection of common programming errors

I am trying to implement a ng-grid along with tree functionality in Angular js. But I am not clear how to add dependency in it. If I am using only tree , its working fine , but when I am adding grid to it , the tree does not appear on the page. Here is my code of the controller:

var app;


app = angular.module('AbnTest', ['angularBootstrapNavTree']);

/*app=angular.module('AbnTest',['ngGrid']);*/

app.controller('AbnTestController', function($scope) {
  var apple_selected;
  $scope.my_default_handler = function(branch) {
    var _ref;
    $scope.output = "You selected: " + branch.label;
    if ((_ref = branch.data) != null ? _ref.description : void 0) {
      return $scope.output += '(' + branch.data.description + ')';
    }
  };
  apple_selected = function(branch) {
    return $scope.output = "APPLE! : " + branch.label;
  };

  $scope.myData = [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

             $scope.gridOptions = { data: 'myData' };


 $scope.example_treedata = [ {
  label: 'Mineral',
  children: [
    {
      label: 'Rock',
      children: ['Igneous', 'Sedimentary', 'Metamorphic']
    }, {
      label: 'Metal',
      children: ['Aluminum', 'Steel', 'Copper']
    }, {
      label: 'Plastic',
      children: [
        {
          label: 'Thermoplastic',
          children: ['polyethylene', 'polypropylene', 'polystyrene', ' polyvinyl chloride']
        }, {
          label: 'Thermosetting Polymer',
          children: ['polyester', 'polyurethane', 'vulcanized rubber', 'bakelite', 'urea-formaldehyde']
        }
      ]
    }
  ]
 }
 ];
    return $scope.change = function() {
    debugger;
   return $scope.example_treedata = [
     {
     label: 'Animal',
     children: ['Cat', 'Dog']
    }
  ];
};
});

Here I have commented out the dependency for ng-grid because it is creating issues with tree functionality. Has anyone faced a similar kind of issue?

This is my html file:

    
    
    
    
    
    

   
    
     /*var app = angular.module('AbnTest', ['ngGrid']);
           app.controller('MyCtrl', function($scope) {
              csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' +  o.b;   } } }
            hgtOpts = { minHeight: 200 }  ;
            $scope.myDataSmall = [ {hasThing: false,  obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'}
                                 , {hasThing:  true,  obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43}
                                 ]


            $scope.gridOptionsSmall = {
                data: 'myDataSmall',
                plugins: [new ngGridCsvExportPlugin(csvOpts),new ngGridFlexibleHeightPlugin()],
                showGroupPanel: true,
                showFooter: true
            };
        });*/
   /*angular.element(document).ready(function() {
   alert(document.getElementById('test'));
       angular.bootstrap(document.getElementById('test'), ['ngGrid']);
    app.controller('AbnTestController', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

             $scope.gridOptions = { data: 'myData' };

 });
    });*/
 
 

 
 
  Change
  
    
    
      

Tree With Grid

This is the error on Browser console:

Uncaught Error: Unknown provider: $animatorProvider

Originally posted 2013-12-02 01:21:23.