Is it possible to render value of $scope.something inside script?

Question

I'm really new in Web development, So sorry if it's only a little misunderstanding and very miner things.

I'm trying to use this bootstrap-treeview, and component will bind to this existing DOM element,

<div id="tree"></div>

With the basic usage like this,

function getTree() {
  // Some data
  return data;
}    
$('#tree').treeview({data: getTree()});

Now, I want to set treeview using angularJS, So that I tried setting ng-model to that div element and assigned data from the $scope object like $scope.myData = myData;. But it didn't work.

It will be fine if I could possibly mix up the same as given in the description of the library, and retrieve the value of $scope object inside <script> section like this

<script>
    var data = //how to Recieve $scope.myData here
    $('#tree').treeview({ data: getTree() });
</script>

Is it possible to get the value of $scope.myData inside <script>? Or any kind of suggestions to accomplish my task, or even duplication will be greatly appreciated if there is something similar.

I am sorry because I'm really new in these angularJS and other stuffs like Jquery.

Answer 1

To accomplish what you want you should create an AngularJS directive and wrap the initiation of bootstrap-treeview inside it. Something like this:

myModule.directive('treeView', [function() {

        return {
                restrict: 'A',
                scope: {
                    myData: '='
                },
                link: function(scope, element, attrs) {

                    var data = scope.myData;

                    $('#tree').treeview({data: data});
                }
        };
}]);

Then use it like this:

<div id="tree" tree-view my-data="myData"></div>