slider with bxslider, json and angular.js

Question

Good afternoon I'm trying to make a slider with angular using json, but does not work me, someone can help me

HTML

<div startslider></div>

JS

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

app.directive('startslider',function() {
    return {
       restrict: 'A',
       replace: true,
       template: '<ul class="bxslider">' +
                   '<li ng-repeat="picture in images2">' +
                     '<img ng-src="{{picture.source}}" alt="" />' +
                   '</li>' +
                  '</ul>',
       link: function(scope, elm, attrs) {
          elm.ready(function() {    
               $("." + $(elm[0]).attr('class')).bxSlider({
                    mode: 'fade',
                    autoControls: true,
                    slideWidth: 360,
                    slideHeight:600
            });

          });
      }
    };
});


app.controller('MainCtrl', ['$scope', 'forecast', function($scope, forecast) {
  forecast.success(function(data) {
    $scope.fiveDay = data;
    $scope.images2 =  $scope.fiveDay.data;
  });
}]);

app.factory('forecast', ['$http', function($http) { 
  return $http.get('http://graph.facebook.com/10150742250484305/photos?limit=3') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

Here is the link of my slider I'm doing: enter link description here