I am facing an issue with displaying a slider using ng-repeat in my AngularJS code. The pictures and other elements defined in the controller are not showing up on the page. Here is the JavaScript code snippet:
angular.module('starter', [])
.controller('slider', function($scope) {
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
$scope.pictures=[
{
img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg",
info:"Electrical Transmission Line Installation",
desc:"Maintenance and Testing"
},
{
img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
info:"Electrical Transmission Line Installation",
desc:"Maintenance and Testing"
},
{
img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630×tamp=1204139644&table=sgcengco",
info:"Electrical Transmission Line Installation",
desc:"Maintenance and Testing"
}
] ;
})This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="slider" ng-app="starter" ng-controller="slider">
<ul class="slides">
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div><!--slider-->