pasar - AngularJS Variable en el servicio no se está actualizando a la vista?

pasar parametros entre componentes angular 4

Question

He pasado un par de días golpeándome la cabeza contra la mesa, leyendo publicaciones en el blog y, por lo tanto, preguntas sobre mi problema. Probé varias variaciones del código que tengo a continuación y ninguna ha funcionado hasta ahora. Apreciaría cualquier ayuda.

La variable taskList dentro del servicio se actualiza, pero la del controlador no.

Controlador

angular.module("TaskManager").controller("mainController", function ($scope, API) {

    $scope.init = function () {
        console.log("Initializing app");
        API.getTasks();

    }


    $scope.tasks = API.taskList;

    $scope.$watch(function(){return API.taskList}, function(newVal, oldVal){

        alert("This is tasklist in controller" + newVal);
    }, true)


});

Servicio

angular.module("TaskManager").service("API", function ($http, $rootScope) {

    const apiKey = "PUH";
    var taskList = [1,2,3,4];
    const getTasks = function () {
        $http.get("https://api.mlab.com/api/1/databases/jquerytaskmanager/collections/tasks?apiKey=" + apiKey).then(function (data) {
           taskList = data; 
           console.log(taskList);
        });
    };

    $rootScope.$watch(function(){return taskList}, function(newVal, oldVal){

        alert(taskList);
        taskList = newVal;


        console.log(taskList);

    }, true)

    return {
        getTasks,
        taskList

    }
});

Ver

<div class="row">
    <div class="col s12">

        <ul id="mainMenu" class="right hide-on-med-and-down">
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a></li>
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-plus" aria-hidden="true"></i> Add Task</a></li>
            <li><a class="waves-effect waves-light btn blue darken-4"><i class="fa fa-pencil" aria-hidden="true"></i> Manage Categories</a></li>
        </ul>

    </div>

</div>

<div class="mainContainer container">
    <div class="row">
        <div class="col 6">
            <h2>Tasks</h2>



        </div>

    </div>



            <ul>
                <li class="taskContainer" ng-repeat="task in tasks" >

                    <div class="row">
                        <div class="col s6">
                             <span class="taskName"> {{task.task_name}}</span> 
                        </div>

                        <div class="col s6">
                            <button class="btn blue darken-4 waves-effect waves-light  ">Edit</button> <button class="btn red darken-4 waves-effect waves-light ">Delete</button>
                        </div>

                    </div>


                </li>

            </ul>








</div>

Answer 1

Devuelve la promesa de $ http del servicio:

app.service("API", function($http) {
    this.getTasks = function() {
        return $http.get(url);
    };
});

Luego, en el controlador, extrae los datos de la promesa:

app.controller("mainController", function($scope, API) {
    this.$onInit = function () {
        console.log("Initializing app");
        API.getTasks().then(function(response) {
            $scope.tasks = response.data;
        });    
    };
});

Para obtener más información, consulte la referencia de API de servicio AngularJS $ http .