在AngularJs中，在API响应之前渲染模板

我使用angular-slick库通过ng-repeat在幻灯片上显示项目。这些项目是我通过异步调用API获得的。我的问题是模板是在API的响应之前呈现的。

这是我的控制器

    angular.module('myApp')
  .controller('homepageCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
    $http({method: 'GET', url: 'https://myapi.com/xxxxxx'}).
    success(function(data, status, headers, config) {
            $scope.articlesSlide = data.articles
    });
  }]); 

这是我的模板

<slick infinite="true" dots="true" arrows="true">
          <div ng-repeat="articleSlide in articlesSlide">
          <a href="/{{articleSlide.cat}}/articulo/{{articleSlide.slug}}" class="dentro" title="Ver noticia">
            <div class="imagen"><img ng-src="{{articleSlide.image}}" alt="{{articleSlide.title}}" /></div>
            <div class="texto">
              <div class="inner">
                <div class="cat">{{articleSlide.0.cat}}</div>
                <h2>{{articleSlide.title}}</h2>
              </div>
            </div>
          </a>
          </div>
          </slick>