title: How do I update table values on $scope value change in Angular js?
body: <p>Just learning Angular js. I am attempting to update values on a table based off of an array stored inside a service.</p>
  
  <p>The issue that I am having is that the table in html is not updating when the scope value for the variable <code>$scope.names</code> changes in the exercise controller. I am 100% positive that the code in the exercise service functions correctly and the angular tags in the html are correct. I have included the sections of my code for the html page, controller, and service below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('howardsiteApp').controller('exerciseCtrl', function($scope, pageFooter, exerciseService) {
    pageFooter.setfooterText('Exercise Tracker');
    $scope.action = 'Add Exercise';
    $scope.names = [];
    $scope.days = [{
      value: "Monday",
      text: "Monday"
    }, {
      value: "Tuesday",
      text: "Tuesday"
    }, {
      value: "Wednesday",
      text: "Wednesday"
    }, {
      value: "Thursday",
      text: "Thursday"
    }, {
      value: "Friday",
      text: "Friday"
    }];
  
    $scope.getVal = function(item) {
      var temp = exerciseService.getExercises(exerciseService.getDayIndex(item.value));
      $scope.names = [];
      for (var i = 0; i &lt; temp.length; i++) {
  
        //THIS IS THE VALUE I WANT DISPLAYED IN THE TABLE
        $scope.names.push({
          n: temp[i]
        });
      }
  
  
      //I CAN SEE THE VALUE CHANGING BUT MY TABLE DOESN'T UPDATE  
      console.log($scope.names);
    };
  });
  
  
  'use strict';
  
  angular.module('howardsiteApp').service('exerciseService', function() {
  
    var exerciseDays = [{
        day: "Monday",
        exercises: []
      }, {
        day: "Tuesday",
        exercises: []
      },
      //DUMMY VALUES TO MAKE SURE THAT DATA WAS ACTUALLY BEING PASSED TO THE CONTROLLER
      {
        day: "Wednesday",
        exercises: ["test"]
      }, {
        day: "Thursday",
        exercises: ["this"]
      }, {
        day: "Friday",
        exercises: []
      }
    ];
  
    return {
      getDayIndex: function(key) {
        for (var i = 0; i &lt; exerciseDays.length; i++) {
          if (exerciseDays[i].day === key) {
            return i;
          }
        }
      },
      getExerciseIndex: function(index, key) {
        for (var i = 0; i &lt; exerciseDays[index].exercises.length; i++) {
          if (exerciseDays[index].exercises[i] === key) {
            return i;
          }
        }
      },
      addExercises: function(index, key) {
        exerciseDays[index].exercises.push(key);
      },
      removeExercise: function(index, key) {
        var temp = exerciseDays[index].exercises[(exerciseDays[index].exercises.length) - 1];
        exerciseDays[index].exercises[key] = temp;
        exerciseDays[index].exercises.length = exerciseDays[index].exercises.length - 1;
      },
      getExercises: function(key) {
        return exerciseDays[key].exercises;
      }
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="viewOne"&gt;
    &lt;h1&gt;&lt;b&gt;Add Exercise&lt;/b&gt;&lt;/h1&gt;
    &lt;h2&gt;&lt;i&gt;Select day&lt;/i&gt;  &lt;select ng-model="daySelect" ng-controller="exerciseCtrl" ng-options="d.text for d in days" ng-change="getVal(daySelect)"&gt;
    &lt;/select&gt;&lt;/h2&gt;
    &lt;table class="table"&gt;
      &lt;tr&gt;
        &lt;th class="text-center"&gt;Name&lt;/th&gt;
        &lt;th class="text-center"&gt;Option&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr data-ng-controller="exerciseCtrl" data-ng-repeat="name in names"&gt;
        &lt;td&gt;{{name.n}}&lt;/td&gt;
        &lt;td&gt;
          &lt;button class="btnSubmit"&gt;Delete&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;input type="text" placeholder="ex. pushup" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;button class="btnSubmit"&gt;Add&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>