[[object HTMLUListElement]] while loading angular treeview in angularjs

Question

I'm trying to use angular-treeview for creating a document tree. But even after doing all the steps as mentioned the result I;m getting is [[object HTMLUListElement]] . Now I'm not sure what should I change and where should I change in order to make it work.

Here is the code:

<div ng-controller="myController">

<div>
  <input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1" /> <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2" />
</div>

<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
  <span><b>Selected Node</b> : {{mytree.currentNode.roleName}}</span>
</div>

<!--
  [TREE attribute]
  angular-treeview: the treeview directive
  tree-id : each tree's unique id.
  tree-model : the tree model on $scope.
  node-id : each node's id
  node-label : each node's label
  node-children: each node's children
-->
<div
  data-angular-treeview="true"
  data-tree-id="mytree"
  data-tree-model="roleList"
  data-node-id="roleId"
  data-node-label="roleName"
  data-node-children="children" >
</div>

<script>

   (function(){

    //angular module
    var myApp = angular.module("mainApp");

  //test controller
  myApp.controller('myController', function($scope){

  //test tree model 1
  $scope.roleList1 = [
    { "roleName" : "User", "roleId" : "role1", "children" : [
      { "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
      { "roleName" : "subUser2", "roleId" : "role12", "children" : [
        { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Admin", "roleId" : "role2", "children" : [] },

    { "roleName" : "Guest", "roleId" : "role3", "children" : [] }
  ];

//test tree model 2
$scope.roleList2 = [
    { "roleName" : "User", "roleId" : "role1", "children" : [
      { "roleName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [] },
      { "roleName" : "subUser2", "roleId" : "role12", "collapsed" : true, "children" : [
        { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Admin", "roleId" : "role2", "children" : [
      { "roleName" : "subAdmin1", "roleId" : "role11", "collapsed" : true, "children" : [] },
      { "roleName" : "subAdmin2", "roleId" : "role12", "children" : [
        { "roleName" : "subAdmin2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subAdmin2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subAdmin2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Guest", "roleId" : "role3", "children" : [
      { "roleName" : "subGuest1", "roleId" : "role11", "children" : [] },
      { "roleName" : "subGuest2", "roleId" : "role12", "collapsed" : true, "children" : [
        { "roleName" : "subGuest2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subGuest2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subGuest2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]}
  ];



//roleList1 to treeview
$scope.roleList = $scope.roleList1;

});

})();

I have included the angular.treeview.js file and it's getting loaded properly. I have checked it in console that the file is getting loaded.

Also I have a separate .js file which loads all the dependency during bootstraping. Code :

var app = angular.module("mainApp", ['ngRoute',
                                 'elif',
                                 'ui.bootstrap',
                                 'ngMessages',
                                 'ngSanitize',
                                 'ngTable',
                                 'angularUtils.directives.dirPagination',
                                 'ngFileUpload',
                                 'ngMaterial',
                                 'angularTreeview'
                                ]); 
....

The result I'm getting in :

Angular-treeView directive loaded fine in console.

What am I missing in here. I tried looking for solutions but no success.

Answer 1

One issue i am seeing is, you assigned one module named mainApp to variable myApp .So you should use myApp.controller('myController', function($scope){ to create controller.See your code below

   (function(){

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

  //test controller
  mainApp.controller('myController', function($scope){