SO 51470761

http://angularjs.org/

by Devlin Pajaron

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div ng-controller="MyCtrl">
  {{text}}
  <table border="1" width="100%">
    <tbody>
      <tr ng-repeat="row in table">
        <td>
          <input type="text" value="{{row.value}}" ng-model="row.model" ng-init="row.model=row.value">
        </td>
        <td>
          <button ng-click="getRowValue(row.model)">Get Row Value</button>
        </td>
      </tr>
    </tbody>
  </table>
  <button ng-click="addTableRow()">Add Table Row</button>
  <br>
  <span>Selected Row</span>
  <pre>
    {{selectedRow}}
  </pre>
</div>

CSS

.bordered {
  border: 1px solid black;
}

.inline {
  max-width: 137px !important;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}
.inline-no-va {
  max-width: 137px !important;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.noinline {
  max-width: 137px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function ($scope) {
	$scope.text = 'text';
  $scope.selectedRow;
  $scope.table = [
  	{ value: 1 },
    { value: 2}
  ];
  $scope.getRowValue = (row) => {
  	$scope.selectedRow = row;
  };
  $scope.addTableRow = () => {
  	$scope.table.push({
    	value: $scope.table.length + 1
    });
  };
});