AngularJS $http not firing get call

Question

I have a question about firing $http.get from multiple sources in AngularJS. Code below is quite simple: I have $scope.test function which is click handler for one button in HTML. This $http.get works ok. Then I have $http.get which gets some data from server and creates basic primitives chart. Very simple and this works as well. And then, I would like to append button on every chart node and on button handler I would like to execute another $http.get call. But this one doesn't work!

Here is code:

$scope.test = function () {
    console.log('Klic na ID 1');
    $scope.commonController.getData('orgunit/1?jsonDepth=3')
        .success(function(workpositionData,status,headers,config) {
            console.log('Klic na ID 1 OK');
            $scope.workPositions = workpositionData.workPositions;
        }).error(function(data,status,headers,config) {
            commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
        });
};


var options = new primitives.orgdiagram.Config();    
var itemB, itemC, itemD, itemE;
var rootItem = new primitives.orgdiagram.ItemConfig();

options.rootItem = rootItem;
options.cursorItem = rootItem;
options.hasSelectorCheckbox = primitives.common.Enabled.True;

var buttons = [];
buttons.push(new primitives.orgdiagram.ButtonConfig("add", "ui-icon-folder-open", "Add0"));     
options.buttons = buttons;

options.onButtonClick = function (e, data) {
    console.log('Klic na ID '+data.context.id);
    $http.get('proxy/api/orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID '+data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });                 
};

$http.get('proxy/api/orgunit/tree?jsonDepth=2')
.success(function(orgUnitsData,status,headers,config) {
    console.log('Reading orgunit tree ok');

    rootItem.title = orgUnitsData.orgUnits[0].title;
    rootItem.description = orgUnitsData.orgUnits[0].description;        
    rootItem.id = orgUnitsData.orgUnits[0].id;
    rootItem.hasSelectorCheckbox = false;
    rootItem.image = "http://www.basicprimitives.com/demo/images/photos/a.png";

    $scope.addItems(rootItem, orgUnitsData.orgUnits[0].subordinates, 0);
    jQuery(".basicdiagram").orgDiagram(options);


}).error(function(data,status,headers,config) {
    console.log('Reading orgunit not ok');
}); 

I tried a lot of combinations of creating this chart (directive, separate template and controller, ...) but nothing works. $http.get call from button on chart note doesn't fire (nothing in Network in Chome Developer Tools).

But here is interesing this: if I execute test function another time (click on html button), I get response from test function AND from $http.get from chart button. It looks like $http.get call from chart button is waiting for something and when this something appers, it fires.

Does anyone have any idea what would be solution to this problem? Output in console for scenario execute test, execute chart button function, execute test is like this (bolded are console entries from chart button function, nonbolded from test function:

Klic na ID 1 Klic na ID 1 OK Klic na ID 4 Klic na ID 1 Klic na ID 1 OK Klic na ID 4 OK

If you have any idea about this please let me know, this thing is driving me crazy a few last hours. UPDATE

I solved it with solution, found here https://github.com/angular/angular.js/issues/2794#issuecomment-18807158, so I wraped my call function with $scope.$apply.

$scope.$apply(function() {
    console.log('Klic na ID ' + data.context.id);
    $scope.commonController.getData('orgunit/' + data.context.id + '?jsonDepth=3')
    .success(function(workpositionData,status,headers,config) {
        console.log('Klic na ID ' + data.context.id + ' OK');
        $scope.workPositions = workpositionData.workPositions;
    }).error(function(data,status,headers,config) {
        commonController.error('Pri branju delovnih mest je prišlo do napake: '+data.description);
    });
});

Best Regards

Answer 1

Starting from angular 1.1.4 you need to call $http in the context of an angular digest loop. If you do not do so then you can manually call $scope.$apply(); after the http call. See https://github.com/angular/angular.js/issues/2431#issuecomment-18566595