$scope variable not updating in view

Question

I have the following snippet of code,

<div ng-controller="GraphCtrl" ng-if="errorTracerouteResultsLength!=0">
  <h5>Erroneous Traceroute Paths
    <small>Sub-heading</small>
  </h5>

  <a href="#"  ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val.metadata);">
    S: {{val.source.ip}}
    D: {{val.destination.ip}}
  </a>
</div>

It works fine, loadTraceroutePath belongs to another controller,(lets call it X) but somehow ng-click works and console.log gets printed out with the correct metadata value.

However, in controller X, I have,

$scope.loadIndividualTraceroutePath = function (metadataKey) {
   $scope.noOfResults = 1;
}

In the html, I have {{noOfResults}} all over the place. Some of it are able to display 1 while some can't. I have already attached the ng-controller directives and point to controller X, but {{noOfResults}} does not display.

How can I make {{noOfResults}} display in any section of the HTML?

Edit: I have added the HTML.

<div class="row">
  <div class="col-lg-9">
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw"></i> Visualisation
        <div class="pull-right">
          Layout
        </div>
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">

        <div class="container" ng-controller="X">
          <!--This does not work-->
          {{noOfResults}}
        </div>

        <div>

          <div ng-controller="IndividualTraceroutePathGraphCtrl" id="individual_traceroute_path_graph"></div>

        </div>

      </div>
      <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
  </div>

The ng click in the first part of this question is way below.

Just wanted to update that using $rootScope, all of the {{noOfResults}} in the HTML is updated. But I still would like to know what is wrong for learning purposes. — Park Taecyeon, Aug 06 '16 at 17:33
Do use `Dot rule` while defining primitive type variable and wanted to display inside `ng-if`/`ng-repeat`, for more information refer [this answer](http://stackoverflow.com/a/38275584/2435473) — Pankaj Parkar, Aug 06 '16 at 17:56

Sajeetharan · Answer 1 · 2016-08-06T17:32:09.870

0

You have a extra ; at the end, also you are not using the object what you are passing as a parameter to the function, hence Change

From:

<a href="#"  ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val.metadata);">

To:

<a href="#"  ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val)">

Then,

$scope.loadIndividualTraceroutePath = function (metadataKey) {
   $scope.noOfResults = 1;
}

EDIT

You don't need to mention so many controllers in the view, have one controller where the function is defined and remove the rest, here, Update like this,

   <div class="container" >
          <!--This does not work-->
          {{noOfResults}}
        </div>
        <div>
          <div id="individual_traceroute_path_graph"></div>
        </div>
    </div>

edited Aug 06 '16 at 17:32

answered Aug 06 '16 at 17:10

Sajeetharan

216,225
63
350
396

I have tried all combinations of ng-click with/without semi colon and val.metadata/val. The value itself pass fine onto the function. The issue is with the $scope not updated in certain places. – Park Taecyeon Aug 06 '16 at 17:14
@ParkTaecyeon where is the place you are showing noOfResults in the view – Sajeetharan Aug 06 '16 at 17:21
If I have a couple of controllers for one HTML, how should I declare them? I had always thought to declare the controller to each tag where the data is accessed. Do I put everything in the body, followed by a div in the body with 2nd controller, followed by 3rd controller, etc. – Park Taecyeon Aug 06 '16 at 17:37
@Sajeetharan. For sure that extra *semicolon* doesn't affect absolutely **anything**. – developer033 Aug 06 '16 at 17:59
@developer033 i agree that :) – Sajeetharan Aug 06 '16 at 18:00

$scope variable not updating in view

1 Answers1