Почему $ scope.data.task не определен?

Question

У меня есть выбор, который я заполняю функцией в угловых.Но когда я перезагружаю страницу (f5), $ scope.data.tasks не определен. Это мой html

<div class="col-sm-3">
<label>
<select class="w-full form-control col-sm-10" ng-model="data.category"  ng-options="cantTasksByCat(category) for category in categoriesEx  | orderBy:'title'" ></select>
</label>
</div>

, это мой js

app.controller('TasksCtrl', ['$scope',  'api', 'toaster', function($scope, api, toaster, ) {
   $scope.data = {
  tasks: [],
  category: tempCat,
  selectedTask: null

};
$scope.data.tasks = $scope.tasks;

$scope.cantTasksByCat = function (cat) {
  let cantTasksByCategory;
  if (cat.title.en==='View all'){
    cantTasksByCategory= $scope.tasks;
    return " (" + cantTasksByCategory.length + ")";
  }  
  cantTasksByCategory = $scope.tasks.filter(function(obj) {
    return obj.category.objectId== cat.objectId;
});
  return " (" + cantTasksByCategory.length + ")"; };}]);

Я хочу загрузить введите описание изображения здесь

Выбор заполняется правильно, но когда я перезагружаю браузер (f5), он выдает ошибку.$ Scope.data.tasks не определено. Как, например, еще не удалось получить запрос