// declare a module var myApp = this.angular.module('myApp', []); // declare a controller myApp.controller('SelectCtrl', function ($scope) { $scope.val = [[0,1,2],[3,4,5],[6,7,8]]; $scope.update = function(){ $scope.finalVal = String($scope.val); } $scope.update(); });
<!-- stitch this with the module declare in Javascript --> <body ng-app="myApp"> <div ng-controller="SelectCtrl"> <table> <tr> <td colspan="3">Values</td> </tr> <tr> <td> <input type="text" ng-model="val[0][0]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[0][1]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[0][2]" maxlength="3" ng-change="update();"/> </td> </tr> <tr> <td> <input type="text" ng-model="val[1][0]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[1][1]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[1][2]" maxlength="3" ng-change="update();"/> </td> </tr> <tr> <td> <input type="text" ng-model="val[2][0]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[2][1]" maxlength="3" ng-change="update();"/> </td> <td> <input type="text" ng-model="val[2][2]" maxlength="3" ng-change="update();"/> </td> </tr> <tr> <td colspan="3">Final values:</td> </tr> <tr> <td colspan="3">{{finalVal}}</td> </tr> </table> </div> </body>
table { width:100%; } tr { width:100%; } td { width:100%; text-align:center; }