Update / save / display values in a table I am relatively new to Angular and need to put together an application to update / save / display values. The code is working, but I wanted your input the make sure that I am doing this 'the angular way'.

JavaScript

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

app.controller('TableController', ['$scope', '$log',function($scope, $log){
   $scope.family = familyMembers;


   $scope.SaveMember = function() {
       var saveMember = { name: $scope.name, age: $scope.age };
       if ($scope.editItem == -1) {
            $scope.family.push(saveMember);
            // insert in db here
       }
       else {
           $scope.family[$scope.editItem] = saveMember;
           $scope.editItem = -1;
           // update db here
       }       
       Init();
   };

   $scope.DeleteMember = function(idx) {
       $scope.family.splice(idx,1);
       // delete from db here
   }

   $scope.EditMember = function(idx){
       $scope.name = $scope.family[idx].name;
       $scope.age = $scope.family[idx].age;
       $scope.editItem = idx;
       $scope.buttonText = 'Update';
   }

   function Init() {
        $scope.name = '';
        $scope.age = '';
        $scope.editItem = -1;
        $scope.buttonText = 'Add new';
   }

   Init();

}]);

var familyMembers = [
    { name: "Joe", age: 42}
    , { name: "Jane", age: 40}
    , { name: "Bob", age: 13}
];


HTML

&lt;html ng-app="family"&gt;
    &lt;head&gt;
        &lt;link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
        &lt;style&gt;
            .ng-valid.ng-dirty {border-color: green}
            .ng-invalid.ng-dirty{border-color: red}
            table tr td {padding: 4px}
            [ng-click] {cursor: pointer}
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div ng-controller="FamilyController" style="margin: 40px"&gt;
            &lt;h1&gt;Family Members:&lt;/h1&gt;
            &lt;table&gt;
                &lt;tr ng-repeat="p in family track by $index"&gt;
                    &lt;td ng-click="EditMember($index)"&gt;{{p.name}}&lt;/td&gt;
                    &lt;td&gt;{{p.age}}&lt;/td&gt;
                    &lt;td&gt;&lt;a href ng-click="DeleteMember($index)"&gt;X&lt;/a&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;hr&gt;
            &lt;h1&gt;Add member&lt;/h1&gt;
            name &lt;br&gt;
            &lt;input type="text" ng-model="name"&gt;&lt;br&gt;
            age &lt;br&gt;
            &lt;input type="number" ng-model="age"&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type="button" value="{{buttonText}}" ng-click="SaveMember()" /&gt;            
        &lt;/div&gt;
        &lt;br&gt;&lt;br&gt;
    &lt;/body&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="./js/app.js"&gt;&lt;/script&gt;
&lt;/html&gt;
Yup, looks like The Angular Way™. A good rule of thumb for controllers is that 1) it exposes data, 2) it exposes functionality, 3) not tied to any specific template. There's a few things though.

var familyMembers = [
    { name: "Joe", age: 42}
    , { name: "Jane", age: 40}
    , { name: "Bob", age: 13}
];


Why is this outside the controller? Why not define it inside? If you want it defined separately from the controller, consider using a provider/service/factory to store it. Then pull that provider/service/factory into the controller as a dependency.

Init isn't really some initialization. It's resetting your form data. A better way to do this, instead of emptying the object values, is to create a function that returns a blank version of the object and replace the form data.

function createMember(){
  return { name: '', age: '' };
}

function resetForm(){
  $scope.formData = createMember();
}

// Assuming the form uses `$scope.formData` as the form object


As for saving, before you reset, you just copy the form data using angular.copy and pop it in the members array. This way, the object you put in the array isn't the same object referenced by the form data, which may still be subject to binding. Then you reset the form data.

function saveForm(){
  var newMember = angular.copy($scope.formData);
  members.push(newMember);
  resetForm();
}