title: How modify the content of a html table with with a ng-click event outside the table that get data from a RESTFUL API
body: <p>How can I fill the table using an Angujarjs' click event from outside the table. A click event in a div or button using ng-click get data from a web API and it updates a angular model that should be use to fill the table.</p>
  
  <p>So far the process to click and collect data is working but the table is not being filled. The ng-repeat is not working.</p>
  
  <p>I have now this code and it is not working:</p>
  
  <p>NG  Controller</p>
  
  <pre><code>//showParticipantCollectedData is working and I get the data from the API
     var DataCollectionSetupController = function ($scope, metricRepository, participantRepository, dataCollectionSetupRepository) {
          ....
          $scope.showParticipantCollectedData = function (petsId) {
              $scope.collectedDataByPetsId = dataCollectionSetupRepository.getCollectedDataFromPets(petsId);
          };
  
   .....
  
      }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>....
     &lt;button data-ng-click="showParticipantCollectedData(100)"&gt;Test&lt;/button&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;table class="table table-striped table-bordered table-hover"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th width="4%"&gt;#&lt;/th&gt;
                                      &lt;th width="40%"&gt;Variable Name&lt;/th&gt;
                                      &lt;th width="23%"&gt;Value&lt;/th&gt;
                                      &lt;th width="33%"&gt;Measure&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr data-ng-repeat="measure in collectedDataByPetsId"&gt;
                                      &lt;td&gt;{{measure.Id}}&lt;/td&gt;
                                      &lt;td&gt;{{measure.Value}}&lt;/td&gt;
                                      &lt;td&gt;{{measure.MetricId}}&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  ....
  </code></pre>