Replacing the <img> src with Angular.js

Question

I am currently building a slideshow of header images, then on click select and set that header image to replace the old one. This is my code so far:

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

app.controller('BannerCtrl', function($scope) {  

  var imageCounter = 0;

  $scope.nextButton = function () {
    imageCounter = imageCounter + 1;
    if (imageCounter === 1) {
      $scope.carouselState = 'second-slide';
    }
    if (imageCounter === 2) {
      $scope.carouselState = 'third-slide';
    }
    if (imageCounter > 2) {
      imageCounter = 0;
      $scope.carouselState = 'reset-slide';
    }
  };

  $scope.previousButton = function () {
    imageCounter = imageCounter - 1;
    if (imageCounter < 0) {
      imageCounter = 2;
      $scope.carouselState = 'third-slide';
    }
    if (imageCounter === 1) {
      $scope.carouselState = 'second-slide';
    }
    if (imageCounter === 0) {
      $scope.carouselState = 'reset-slide';
    }
  };

  $scope.setHeader = function () {
    if (imageCounter === 0) {
      $scope.currentbannerImage = '/styles/img/banner-default1.jpg';
      $scope.bannerState = '';
    }
  };

  $scope.currentbannerImage = [
    {
      src: "1.jpg"
    }
  ];

  $scope.bannerImages = [
    {
      src: "2.jpg"
    },
    {
      src: "3.jpg"
    },
    {
      src: "4.jpg"
    }
  ];
});

I have also set up a Plunker, to demonstrate what I am on about!

http://plnkr.co/edit/vRexvso9RvLwyKK1vcKZ

Please can someone help me to replace the 'currentBannerImage' with one of the other 'bannerImages'?

Thanks,

JP

Answer 1

You can use AngularJS UI Bootstrap for implementing carousel with AngularJS (if your interest is strictly in solution).

Edit:

I'm not sure if that's what you wanted, but maybe this will be helpful: http://jsfiddle.net/FKUs3/

<img ng-src="{{availableImages[currentImage].src}}"/>

and

$scope.currentImage = 0;
$scope.availableImages = [
{
  src: "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/US_1.svg/50px-US_1.svg.png"
},
{
  src: "http://0.tqn.com/d/painting/1/0/V/_/1/Stencil-Number2a.jpg"
},
{
  src: "http://eminiunderground.com/wp-content/uploads/2012/02/Stencil-Number3a.jpg"
}
];

$scope.nextButton = function() {
  $scope.currentImage++;
  if ($scope.currentImage > ($scope.availableImages.length - 1)) {
    $scope.currentImage = 0;
  }
}
$scope.prevButton = function() {
  $scope.currentImage--;
  if ($scope.currentImage < 0) {
    $scope.currentImage = ($scope.availableImages.length - 1);
  }
}