0

I have the following code in an angular app.

<select ng-options="f as f.name for f in wf"
                            ng-model="w" ng-change="showChart(w)">
</select>

<button type='button' ng-click="showChart(w)">Display</button>

Both call a jquery function that does the following:

$scope.showChart = function(w){
    console.log("Showing chart " + w.identifier);
    $('#list-'+ w.identifier).orgChart({container: $('#chart-' + w.identifier)});
    console.log("Chart showing");
};

Now, when I change the select I see the 2 log messages in the console, but the chart does not display until I click the button.

When I click the button, the chart displays. After clicking the button, when I change the select the chart changes.

Why would this not be working properly? These 2 tags are right above/below each other on the page, and they do the same thing, it's just that nothing shows up until I click the button.

Clicking the button should do the exact same thing as changing the select, but the select does not work until the button is clicked??

mikeb
  • 10,578
  • 7
  • 62
  • 120
  • This is the typical problem, when you are using jQuery with AngularJS. The missing thing is digest cycle. you need to kick off digest cycle to make binding in a sync again.. read up on [this answer](http://stackoverflow.com/a/15012542/2435473) will help you to clear out things – Pankaj Parkar Jan 27 '16 at 20:01
  • You're right, of course. FYI, you mention the digest cycle but if you go to your link and CTRL-F for digest it does not find any mention of it... – mikeb Jan 27 '16 at 20:16
  • my bad.. that answer doesn't have much information about `$digest` cycle, but there is mention `$apply` methodof scope, which is responsible for calling digest cycle.also that cute answer tells how should you think when using jQuery in AngularJS. Anyway's here is [another link](http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/) which has better explanation about digest cycle – Pankaj Parkar Jan 27 '16 at 20:23

0 Answers0