如何在AngularJs中正确填充和渲染模型集合？

Question

我的代码中有这样的内容：

var app = angular.module('todoApp');

app.controller('todoCtrl', function($scope, Todo) {
  $scope.todos = [];

  Todo.fetchTodos().then(function(todos) {
    $scope.todos = todos;
  });
});

app.service('Todo', function($http) {
  var fetchTodos = function() {
    return $http.get('/api/todo').then(function(res) {
      return res.data;
    })
  };

  return {
      fetchTodos: fetchTodos
  };
});

在我的html模板中，我有ng-show的两个div标签，表示$scope.todos是否为空。

这个问题是我在看到预期结果之前会看到意外的结果。

是否有一种通常的做法是让视图的过渡更加愉快？