ng-click inside ng-repeat setting value on parent scope

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

app.controller('MainCtrl', function($scope) {
  
  /*
  ng-repeat generates new scopes which will be child scopes of the scope within
  which they are generated. In other words, this scope is the parent scope for
  the child scopes generated by the ng-repeat in this example. Child scopes
  inherit things from their parent's scope.
  */

  // The initial main image 
  var initialImg = "http://goo.gl/3DakU0";
  
  /*
  A primitive holding the URL for the main image
  
  This scope's child scopes will "shadow" this primitive, which basically means
  they'll get their own copy that is initialy the same value. The child scopes
  can only see their own copy though, so modifying the value in the child scope
  does not affect the value in the parent scope.
  */
  $scope.mainImgUrl = initialImg;
  
  /*
  An object holding the URL for the main image
  
  This scope's child scopes will NOT get their own copy of this object.
  Referencing main or main.imgUrl in the child scope will reference this object
  on this scope (unless the child scope explicitly define its own "mainImg" object.)
  */
  $scope.mainImg = { url: initialImg };
  
  // Our 'thumbnail' images
  $scope.images = [
      "http://happy.fm/wp-content/uploads/2011/10/random-owl.jpg",
      "http://www.superhumor.com/emoticonos/8761.gif"
  ];
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <h1>ng-click inside ng-repeat setting value on parent scope</h1>
    
    <p>
    Example to illustrate the nuances of prototypical inheritance. See 
    <a href="http://docs.angularjs.org/tutorial/step_10#comment-977962885">this Angular Tutorial Step 10 question</a>
    and
    <a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes">Understanding Scopes</a>
    .
    </p>
    
    
    <h3>Using primitive:</h3>
      
    <div class="example">
    
      <img class="mainImg" ng-src="{{mainImgUrl}}" />
      
      <p>This is the parent scope with the main image.</p>
      
      <p>$scope.mainImgUrl == {{mainImgUrl}}</p>
  
      <div class="thumbs">
      
        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImgUrl</strong> (click on them to see what happens):</p>
        
        <div class="thumbDiv" ng-repeat="img in images">
        
          <img class="thumb" ng-src="{{img}}" ng-click="mainImgUrl = img" />

          <p>This is a child scope generated by ng-repeat.</p>
          
          <p>$scope.mainImgUrl == {{mainImgUrl}}</p>
          
        </div>
        
      </div>
      
    </div>
    
    
    <h3>Using object:</h3>
    
    <div class="example">
      
      <img class="mainImg" ng-src="{{mainImg.url}}" />
      
      <p>This is the parent scope with the main image.</p>
      
      <p>$scope.mainImg.url == {{mainImg.url}}</p>
  
      <div class="thumbs">
      
        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImg.url</strong> (click on them to see what happens):</p>
        
        <div class="thumbDiv" ng-repeat="img in images">
        
          <img class="thumb" ng-src="{{img}}" ng-click="mainImg.url = img" />
          
          <p>This is a child scope generated by ng-repeat.</p>
          
          <p>$scope.mainImg.url == {{mainImg.url}}</p>
          
        </div>
        
      </div>
      
    </div>
    
  </body>

</html>

/* Put your css in here */

.example {
  border: thin solid red;
  padding: 10px;
}

.mainImg {
  width: 160px;
  height: 195px;
  border: thin solid black;
  float: right;
  margin: 0px 0px 10px 5px;
}

.thumbs {
  clear: both;
  overflow: auto;
  border: thin solid silver;
  padding: 5px 10px;
}

.thumbDiv {
  border: thin solid green;
  padding: 5px;
  margin: 10px 0px;
  overflow: auto;
}

.thumb {
  width: 80px;
  height: 87px;
  border: thin solid black;
  cursor: pointer;
  float: left;
  margin-right: 5px;
}