Angular Ngrepeat - Update After Html Changed

I have a problem which I can't seem to get around. I have a simple angular repeat setup to output some slides. There are different sets of slides which can be changed. I'm using a

Solution 1:

I created a pagination script inside your directive that will show only the slides that are contained within your current_listing.slides object property value. I removed the ng-repeat directive from your html because it was adding four more slides to the dom each time you clicked on a listing button. I also moved your {{ scope variable here }} code from your html and placed the variables inside of ng-bind directives so that the brackets are not displayed on the screen before angular compiles. I also added an ng-click directive to your listing buttons that pass an integer value to the controller that sets the current_listing value.

Live Example: http://codepen.io/larryjoelane/pen/ZWzObo

HTML:

<divng-app="myApp"ng-controller="MyCtrl">
  Listing Id: <spanng-bind="current_listing.id"></span><divrepeat-endclass="image_slider col-md-9"><divng-bind="slides"class="slick"></div></div><buttonng-click="changeListing(1)">Listing 1</button><buttonng-click="changeListing(2)">Listing 2</button></div>

Angular/JQuery:

(function($) {

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

  myApp.directive("repeatEnd", function($timeout) {
    return {
      restrict: "A",
      link: function(scope, element, attrs) { //begin link//let angular compile first then call the jquery code$timeout(function() { //begin timeoutfunctionbuildSlides() {

              //array to hold the slidesvar slides = [];

              //loop through and the opening and closing div tags to the slidesfor (var i = 0; i < scope.current_listing.slides.length; i++) { //begin for//add the slide
                slides.push("<div>" + scope.current_listing.slides[i] + "</div>");

              } //end for//return the slides htmlreturn slides.join("");

            } //end function          //initalize slick slider
            $(element).slick(scope.$eval());

            //check for changes in the listing
            scope.$watch('current_listing', function(newValue, oldValue) { //begin watch//if there is a new valueif (newValue) {

                //destroy the slick slider
                $(element).slick("unslick");

                //store the htmlvar content = buildSlides();

                //populate the slides
                scope.slides = scope.$eval(element.html(content));

                //reinitalize slick slider 
                $(element).slick();

              }
            }); //end watch

          }); //end timeout

        } //end link

    };
  });

  myApp.controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {

    $scope.listing = {
      id: 1,
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    };

    $scope.listing2 = {
      id: 2,
      slides: ['Slide 5', 'Slide 6', 'Slide 7', 'Slide 8']
    };

    //intialize the listing$scope.current_listing = $scope.listing;

    //change the listing on click$scope.changeListing = function(listNum) { //begin function//Assign the listings based on the listNum//passed in as a parameter.if (listNum === 1) {
          $scope.current_listing = $scope.listing;
        } elseif (listNum === 2) {
          $scope.current_listing = $scope.listing2;
        }

      } //end function

  }]);

})(jQuery);