Why does an update to a variable in a service ($http) not show up in my view?

Question

I'm blocked on this problem since a couple of hours, so any help is much appreciated.

i've a controller, in which i defined a variable (an empty array):

function MainCtrl(scope, graph) {
    scope.myVar = [];   
    graph.send("a", "b");
}
MainCtrl.$inject = ['$scope',  'plotData'];

plotData is a custom service i wrote. It use $http to query a database, and retrieve the data I need.

angular.module('myApp.services', []).
factory('plotData', ['$http', function(async) {

    var mainScope = angular.element("#main").scope();

    return {
        send: function(plotType, plotDetail) {
            var thisObj = this;

            var ajaxConfiguration = {
                method: 'POST',
                url: '******************',
                data: { 
                    type: plotType,
                    detail: plotDetail
                }
            };

            async(ajaxConfiguration).
                success(function(data, status, headers, config) {                   
                    mainScope.myVar = data.plot;
                    /* 
                        data.plot is what i expected! 
                        I also try with: return data.plot;
                    */

                }).
                error(function(data, status, headers, config) { 
                    console.info("error"); 
                });
        },
        doSomething: function(data) { },
        doSomethingElse: function() { }
    };

}]);

The problem is that in the controller scope.myVar doesn't change. Basically what i'm trying to do is update a variable defined in the controller from a directive.

What I'm doing wrong?

UPDATE:

@dogoku: As i know i don't need to use $apply because i'm using $http that is still in Angular.

@Mark Rajcok:

0) No, i'm using the real $http service:

factory('plotData', ['$http', function(async) { 
    /* service */ 
}]);

1) yes, i wrote in the code comment. data.plot is what I expected it to be. The backend code works great, so I've not posted it.

2) I will try your link and let you know.

Meanwhile any help is still welcome.

Answer 1

As mentioned in the comments, getting the scope via a selector then calling scope() is not very Angular. A better way would be to return a promise from the service. Pete has a good example of how do to this here: https://stackoverflow.com/a/12513509/215945

angular.copy() should be used instead of assignment in the success() callback, so that the data-binding is not lost in the controller.

See also https://stackoverflow.com/a/15345762/215945

Answer 2

The only thing that seems suspicious to is how you get the main scope because when I try to call

angular.element('#something');

with AngularJS 1.0.5 or 1.1.3 I get the following error:

selectors not implemented

You can see that here when you open up the developer tools. This would also explain why your scope's property is not updated.