title: How do I get $index from an ng-repeat table to a modal controller?
body: <p>I have a table of customer records created with angularjs bootstrap-ui and uses ng-repeat.</p>
  
  <p>At the end of each line in the table is a button to get more information about the customer.</p>
  
  <p>When the button is clicked a modal form pops with the information.</p>
  
  <p>my problem is whichever button I press I get the same customer number</p>
  
  <p>The problem is I need to get the value of $index to the following bit of code:</p>
  
  <pre><code>$scope.selected = {
      customer: $scope.customers[0]
  };
  </code></pre>
  
  <p>The value of $index needs to replace the 0 value above</p>
  
  <p>What I have done so far can be seen on plunker click <a href="http://plnkr.co/edit/DNHT1ekB12rlC9KSGzUU?p=info" rel="nofollow">here</a></p>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt;
  &lt;script type="text/ng-template" id="myModalContent.html"&gt;
    &lt; div class = "modal-header" &gt; &lt; h3 &gt; I am a modal! &lt; /h3&gt;
      &lt;/div &gt; &lt; div class = "modal-body" &gt; &lt; form class = "form-horizontal"
    role = "form" &gt; &lt; div class = "form-group" &gt; &lt; label
    for = "customerNumber"
    class = "col-lg-2 control-label" &gt; Email Address: &lt; /label&gt;
              &lt;div class="col-lg-10"&gt;
                  &lt;input type="text" class="form-control" id="customerNumber" 
                          ng-model="selected.customer.customerNumber"
                          ng-value="selected.customer.customerNumber"&gt;
              &lt;/div &gt; &lt; /div&gt;
          &lt;/form &gt; &lt; /div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button &gt; &lt; button class = "btn btn-warning"
    ng - click = "cancel()" &gt; Cancel &lt; /button&gt;
      &lt;/div &gt;
  &lt;/script&gt;
  &lt;div&gt;
    &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Customer number&lt;/th&gt;
          &lt;th&gt;Customer name&lt;/th&gt;
          &lt;th&gt;Customer last name&lt;/th&gt;
          &lt;th&gt;Customer first name&lt;/th&gt;
          &lt;th&gt;phone&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody ng-repeat="customer in customers"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{ customer.customerNumber }}&lt;/td&gt;
          &lt;td&gt;{{ customer.customerName }}&lt;/td&gt;
          &lt;td&gt;{{ customer.contactLastName }}&lt;/td&gt;
          &lt;td&gt;{{ customer.contactFirstName }}&lt;/td&gt;
          &lt;td&gt;{{ customer.phone }}&lt;/td&gt;
          &lt;td&gt;
            &lt;button class="btn btn-default" ng-click="open()"&gt;
              Customer details
            &lt;/button&gt;
          &lt;/td&gt;
  
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  'use strict';
  
  angular.module('myApp', ['ui.bootstrap'])
  .controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  
  
  $scope.customers = [
      {
          "customerNumber": 103,
          "customerName": "Atelier graphique",
          "contactLastName": "Schmitt",
          "contactFirstName": "Carine ",
          "phone": "40.32.2555"
  
      },
      {
          "customerNumber": 112,
          "customerName": "Signal Gift Stores",
          "contactLastName": "King",
          "contactFirstName": "Jean",
          "phone": "7025551838"
  
      },
      {
          "customerNumber": 114,
          "customerName": "Australian Collectors, Co",
          "contactLastName": "Ferguson",
          "contactFirstName": "Peter",
          "phone": "03 9520 4555"
      }
  ];
  
  $scope.open = function () {
  
      var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: ModalInstanceCtrl,
          resolve: {
              customers: function () {
                  return $scope.customers
              }
          }
      });
  
      modalInstance.result.then(function (selectedCustomer) {
          $scope.selected = selectedCustomer;
      }, function () {
          $log.info('Modal dismissed at: ' + new Date());
      });
  };
  });
  
  // Please note that $modalInstance represents a modal window (instance) dependency.
  // It is not the same as the $modal service used above.
  
  var ModalInstanceCtrl = function ($scope, $modalInstance, customers) {
  
  $scope.customers = customers;
  $scope.selected = {
      customer: $scope.customers[0]
  };
  
  $scope.ok = function () {
      $modalInstance.close($scope.selected.customer);
  };
  
  $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
  }
  }
  </code></pre>