AngularJS Variable in service is not updating in view? - angularjs

Question

I have spent a couple of days banging my head against the table, reading blog posts, and SO questions around my issue. I tried several variations of the code I have below and none has worked so far. I would appreciate any help.
The taskList variable inside the service does update, but the one in the controller does not.
Controller
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)
});
Service
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
}
});
View
<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

Return the $http promise from the service:
app.service("API", function($http) {
this.getTasks = function() {
return $http.get(url);
};
});
Then in the controller, extract the data from the promise:
app.controller("mainController", function($scope, API) {
this.$onInit = function () {
console.log("Initializing app");
API.getTasks().then(function(response) {
$scope.tasks = response.data;
});
};
});
For more information, see AngularJS $http Service API Reference.