What is the correct application structure?

Question

Angular

In my understanding, the model should work with the server.
But, if it is made a separate service, the result of the http request for some reason returns "undefined"
controller code

taskApp.controller('taskCtrl', function($scope, $http, taskModel) {
    $scope.tasks = taskModel.getTasks()
});

model code

taskApp.service('taskModel', ['$http',
    function($http) {
        this.getTasks = function () {
            $http.get("tasks.json").then(function (response) {
               console.log(response.data)  // модель правильно получает ответ
                return response.data  // в контроллер это не приходит, хотя, по идее, должно
            })
        }
    }
]);

if you put it in the controller

$http.get("tasks.json").success(function (response) {                
                    $scope.tasks = response;  // работает. Если отдать response.data работать не будет
                })

Works.
Tell me, please, what am I doing wrong?
And it's not clear what to return from the response or response.data model?
Can't this structure be used? o_O
Thank you

Answer 1

//это в твоем сервисе пишешь ф-ии такого типа
function getTasks() {
   var defer = $q.defer();
   $http.get("tasks.json").then(function (response) {
       defer.resolve(response);
    }, function (err) {
       defer.reject(err);
    })
    return defer.promise;
}

//теперь можешь с этим работать
$scope.tasks = {}; // а если у тебя есть роутинг, можешь про resolve прочитать, ну или могу пример написать
YourService.getTasks().then(function(response) {
   tasks = response; // или response.data смотря, что у тебя там приходит - какая структура 
}, function(err) {
    $scope.errors = "error";
})

but in general instead of $scope.tasks do something like this:
Controller:
var vm = this;
vm.tasks = {};
html:
{{ctrl.tasks}}

Answer 2

How to pull data from a function?