<div class="slider fullscreen z-depth-1" slider>
<ul class="slides">
    <li>
        <img src="assets/img/illustration/parsprototo/ppt2.jpg"></img>
    </li>
    <li>
        <img src="assets/img/illustration/kenmeri/kenmeri_marker.jpg"></img>
    </li>
    <li>
        <img src="assets/img/illustration/bagua/BG1.jpg"></img>
    </li>
</ul>

<div class="slider fullscreen z-depth-1" slider>
    <ul class="slides">

        <li ng-repeat="slide in slidesData">
            <img ng-src="{{slide.image}}"></img>
        </li>
  </ul>
</div>

var appControllers = angular.module('appControllers', []);
appControllers.controller('HomeController', ['$scope', '$http',
    function ($scope, $http){
        $http.get('assets/json/home.json').success(function(data){
            $scope.slidesData = data;
        });
    }
]);

[
    {
        "image" : "assets/img/illustration/mudra/mudra1.jpg",
        "headingText" : "This is our big Tagline! 1",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/parsprototo/ppt2.jpg",
        "headingText" : "This is our big Tagline! 2",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/kenmeri/kenmeri_marker.jpg",
        "headingText" : "This is our big Tagline! 3",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/bagua/BG1.jpg",
        "headingText" : "This is our big Tagline! 3",
        "sloganText" : "Here's our small slogan."
    }
]