I need to hide a div with flexslider in it on the root page using ng-hide. The issue is that the images do not load when navigating to another path.
Here is how my index.html is structured:
<ul>
<li><a href="#/">Root</a></li>
<li><a href="#/first">First</a></li>
<li><a href="#/second">Second</a></li>
</ul>
<div ng-controller="SliderController">
<div ng-include="'slider.html'" ng-hide="currentPath === '/'"></div>
</div>
<div ng-view></div>
And this is my app.js code:
app.controller('SliderController', ['$scope', '$location', function($scope, $location){
$scope.$on('$routeChangeStart', function(next, current) {
$scope.currentPath = $location.path();
});
}]);
On starting the Plunker, the index.html displays without the flexslider, which is correct.
When clicking on the first or second link, the template view changes but the flexslider does not appear, although the flexslider styles are applied (see box shadow).
If leaving the first/second view open and switching tabs before returning, the images will then show up. Can someone explain why this happens?