Why does the following $scope becomes blank inside this function?

Question

Why does panodataName becomes empty inside the $scope.addPanodata function?

HTML:

<input type="text" class="form-control" ng-model="panodataName" style="width:auto;padding:0;">
<a class="btn btn-primary" href="javascript:;" ng-click="addPanodata(pano.objectId)">Add</a>

JS:

angular.module('yoApp')
  .controller('addPanoCtrl', function($q, $scope, $rootScope, $routeParams, serviceUpload) {
    $scope.panodataName = ''

    $scope.addPanodata = function(panoId) {
      var Panodata = AV.Object.extend('PanoramaData'),
      panodata = new Panodata(),
      panoJSON = _.where($scope.building.pano, {'objectId': panoId})

      $scope.pano = panoJSON[0]
      console.log($scope.panodataName)
      console.log($scope.panodataName)

      panodata.save(json, {
      success: function(object) {

      },
      error: function(object, error) {

      }
      })
    }

I find it weird, because if I do:

{{panodataName}}

panodataName displays the value of input correctly.

EDIT:

Maybe it's because it's inside an ng-repeat?

<div class="col-md-6" ng-repeat="panodata in pano.panoData">

You are not adding any values in the $scope.panodataName inside the $scope.addPanodata function.Once you add then only the value will not be undefined. — Soven K Rout, Jan 11 '16 at 07:29
You do nothing with `$scope.panodataName` inside the `addPanodata()` except for displaying it in your console. — RiesvGeffen, Jan 11 '16 at 07:32
I thought ` ng-model="panodataName"` was supposed to add a value to `$scope.panodataName?` — alexchenco, Jan 11 '16 at 07:34
I did something similar somewhere in the code: `` ` $scope.addPano = function() { var Pano = AV.Object.extend('Panorama'), pano = new Pano() var json = { 'name': $scope.panoName, 'buildingCode': $scope.buildingId` And the value is being retrieved inside `$scope.addPano`. — alexchenco, Jan 11 '16 at 07:35
Maybe this answer can help [Difficulty with ng-model, ng-repeat, and inputs](http://stackoverflow.com/questions/13714884/difficulty-with-ng-model-ng-repeat-and-inputs). And look at [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482) — georgeawg, Jan 11 '16 at 07:49
Are you saying that when you enter text into the input then click the anchor `$scope.panodataName` logs `undefined` in your console, yet adding `{{panodataName}}` into the view shows the text entered into the input? — ste2425, Jan 11 '16 at 07:51
Please provide the whole html file. Maybe you can use Plunker(https://plnkr.co/edit/?p=catalogue) for this purpose. — benams, Jan 11 '16 at 07:52
I can not figure the bug out, but about the second part of your question, I'm pretty sure that the problem is not related to ng-repeat. I've provided a [codepen](http://codepen.io/anon/pen/NxgxRZ) proving this. — Reyraa, Jan 11 '16 at 07:57

score 2 · Accepted Answer · edited May 23 '17 at 12:15

You say youve got this logic within an ng-repeat. I suspect that is your issue.

What angular will do for each 'itteration' of an ng-repeat is create a new scope. So your ng-model="panodataName" is binding a property called panodataName to that local scope for that specific iteration of the loop, not to the global controllers scope.

Also if you add {{panodataName}} inside the ng-repeat then that will work and print the inputs text because its binding to the ng-repeat's child scope.

What i believe you want is to bind to the parent scope of the ng-repeat. This is where you actually define the panodataName property and also what your trying to log.

To do this you need to change your ng-model too:

ng-model="$parent.panodataName"

$parent is a global variable to that specific loop itteration's scope that points to the ng-repeats parent scope.

Hope that makes sense, ive added a fiddle demo-ing.

NOTE: There is one down side to this implementation, as each input is now bound to the same variable if you update one all others in the ng-repeat will update.

https://jsfiddle.net/j4txmzhe/

EDIT: Added proof,

This states that ng-repeat creates new scopes directives-that-create-scopes

Also a bit more Googleing brings up this SO answer where the comments describe why its a good idea to steer away from $parent.

`ng-repeat` creates new scopes but those scopes inherit from their parents. `ng-model` will work properly if there is a 'dot' in the name. Also you can also use `$index` from `ng-repeat` -- `ng-model="ref.panodataNameList[$index]'`. — georgeawg, Jan 11 '16 at 10:03
@georgeawg Your correct i forgot that, i guess that's why allot of people prefer to bind not directly of the scope but of a sub-property. — ste2425, Jan 11 '16 at 10:17

Why does the following $scope becomes blank inside this function?

1 Answers1