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:

<div ng-app="myApp" ng-controller="MyCtrl">
  Listing Id: <span ng-bind="current_listing.id"></span>

  <div repeat-end class="image_slider col-md-9">
    <div ng-bind="slides" class="slick">
    </div>
  </div>
  <button ng-click="changeListing(1)">Listing 1</button>
  <button ng-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 timeout

            function buildSlides() {

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

              //loop through and the opening and closing div tags to the slides
              for (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 html
              return 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 value
              if (newValue) {

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

                //store the html
                var 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;
        } else if (listNum === 2) {
          $scope.current_listing = $scope.listing2;
        }

      } //end function

  }]);

})(jQuery);