angular js , ng-model not ready for third party directive

Question

I am using https://github.com/ezraroi/ngJsTree and I have come across the following problem.

My ng-model is a AJAX request and when my controller fires, data is not yet ready, so it does not render anything.

<div ng-controller='myCtrl'>
    <div js-tree="treeConfig" ng-model="treeData" should-apply="ignoreModelChanges()" tree="treeInstance" tree-events="ready:readyCB;create_node:createNodeCB"></div>
</div>

https://plnkr.co/edit/IRaqvd0DPcqkxgo0xoqa?p=preview

Answer 1

Depending on the structure of your application, you may have a few alternatives to handle this situation. Create a service that is responsible for reading the data. Then you can do one of the following:

1. make router to wait till the reading is resolved before navigating to the view. Here is a related SO question: AngularJS $http.get with resolve

2. add event listener to the controller and make service to emit/broadcast event when the data is ready.

In both cases, you may want to read data from service.