Improve this doc

In this step, you will add a clickable phone image swapper to the phone details page.



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

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
      $ = data;
      $scope.mainImageUrl = data.images[0];

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;

In the PhoneDetailCtrl controller, we created the mainImageUrl model property and set its default value to the first phone image URL.

We also created a setImage event handler function that will change the value of mainImageUrl.



<img ng-src="{{mainImageUrl}}" class="phone">


<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">

We bound the ngSrc directive of the large image to the mainImageUrl property.

We also registered an ngClick handler with thumbnail images. When a user clicks on one of the thumbnail images, the handler will use the setImage event handler function to change the value of the mainImageUrl property to the URL of the thumbnail image.



To verify this new feature, we added two end-to-end tests. One verifies that the main image is set to the first phone image by default. The second test clicks on several thumbnail images and verifies that the main image changed appropriately.


  describe('Phone detail view', function() {


    it('should display the first phone image as the main phone image', function() {

    it('should swap main image if a thumbnail image is clicked on', function() {
      element(by.css('.phone-thumbs li:nth-child(3) img')).click();

      element(by.css('.phone-thumbs li:nth-child(1) img')).click();

You can now rerun npm run protractor to see the tests run.


TODO! The controller methods are inherited between controllers/scopes, so you can use the same snippet in the phone-list.html template as well. * Move the hello method from PhoneCatCtrl to PhoneListCtrl and you'll see that the button declared in index.html will stop working, while the one declared in the phone-list.html template remains operational.


With the phone image swapper in place, we're ready for step 11 to learn an even better way to fetch data.