Как сделать,чтоб ng-repeat работал с ajax и обновлял данные?

Question

Мне надо подгрузить с сервера таски и вывести их с помощью ng-repeat,но почему-то ,если вывести через console.log мой $scope.todos(массив с тасками),тогда видно,что в него добавились таски,но ничего не добавилось визуально,блоков нет. Но самое интересное,что если перезагрузить страничку или клацнуть на поле ввода тасков,а потом в любое другое место,тогда все появляется.

Вот собственно код:

JS

$scope.todos = [];
    $.ajax({
        type: 'POST',
        url: '/tasks',
        contentType: "application/json",
        dataType: 'json',
        cache: false,
        statusCode: {
            204: function(response) {
                console.log(response);
            },
            200: function(data) {
                $.each(data, function() {
                    var myObject = new Object();

                    $.each(this, function(k, v) {
                        if (k == "text") {
                            myObject.text = v;
                        } else if (k == "dt") {
                            myObject.dt = v;
                        } else if (k == "priority") {
                            myObject.priority = v;
                        } else if (k == "status") {
                            myObject.done = v;
                        }
                    });
                    $scope.todos.push({
                        text: myObject.text,
                        dt: myObject.dt,
                        priority: myObject.priority,
                        done: myObject.done
                    });

                });
                console.log($scope.todos);
            }
        }
    });
    $scope.$watch('todos', function(newVal, oldVal) {
        $timeout(() => {
            $scope.todos = newVal;
        }, 100);
    }, true);

HTML

<div class="task_block col-md-3 col-xs-12" ng-repeat="todo in todos | orderBy:['done','dt']" ng-class="{'done': todo.done}">