Angular скрывает flexslider на корневом URL-адресе

Итак, я хочу ng-hide div, в котором есть flexslider на root. Проблема в том, что images не загружается после перехода на другой путь.

Мой index.html выглядит так:

<ul>
  <li><a href="#/">Root</a></li>           <!-- don't show slider -->
  <li><a href="#/first">First</a></li>     <!-- show slider -->
  <li><a href="#/second">Second</a></li>   <!-- show slider -->
</ul>

<div ng-controller="SliderController">
  <div ng-include="'slider.html'" ng-hide="currentPath === '/'"></div>
</div>

<div ng-view></div>

И app.js:

app.controller('SliderController', ['$scope', '$location', function($scope, $location){ 
    $scope.$on('$routeChangeStart', function(next, current) { 
        $scope.currentPath = $location.path();
    });
}]);

Планкер

Когда вы запускаете плункер, он показывает вам index.html- без flexslider, что хорошо:

И теперь, когда вы нажимаете на первую или вторую ссылку, представление шаблона изменяется и загружается шаблон first.html/second.html, а также должен отображаться flexslider, что не так. Но он показывает стили flexslider (обратите внимание на тень окна).

Но если вы оставите его в представлении first/second, а затем переключите вкладку и вернетесь (в браузере), он покажет изображения.

Может кто-нибудь объяснить, что здесь происходит?