Angular: Flexslider

http://angularjs.org/

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
    <flex-slider slide="item in items track by item.id" animation="slide">
	  	<li>
            <img ng-src="{{item.img}}"/>
                  {{item.name}}
	    </li>
	  </flex-slider>
    <a href="javascript:;" data-ng-click="update()">Update List</a>
    <ul>
        <li data-ng-repeat="item in items track by item.id">{{item.name}}</li>
    </ul>
</div>

JavaScript

var myApp = angular.module('myApp',['angular-flexslider']);

function MyCtrl($scope) {
    $scope.value = undefined;
    $scope.items = [
        {id:1, name:'item1', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg'},
        {id:2, name:'item2', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg'},
        {id:3, name:'item3', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg'}
    ];
    
    $scope.update = function(){
      $scope.items = [
        {id:1, name:'item1b', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg'},
        {id:2, name:'item2b', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg'},
        {id:3, name:'item3b', img:'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg'}
    ]  
    };
}