Can't display $scope variable in view angular

Question

Here's my controller:

angular.module('myApp')

.controller('HomeController', ['$scope', '$geolocation', function($scope, $geolocation) {
    $geolocation.getCurrentPosition({
      timeout: 6000
    }).then(function(position) {
      $scope.position = position;
      $scope.myText = 'Text to show';
      console.log(position);
      console.log($scope.position);
    })
  } 
])

And in template:

   {{ position }} <br/>
   {{ myText }}

Now, in my console, I get this object

Geoposition {coords: Coordinates, timestamp: 1476965809589}

A sign the position came in

In template, I get this:

{} 
Text to show

So, why ain't the $scope.position not showing in my template, although the Text to show shows, and the console log confirms the $scope.position is available?

My home.html:

    <div class="small-12 columns">
        <div class="callout clearfix" style="margin-top:20px;">
            <h5 class="float-center">Welcome Home.</h5>
            {{ position }} <br/>
            {{ myText }}
            <div ng-show="!position" class="float-center">
                <div class="loader">
                    <span>{</span><span>}</span>
                </div>
            </div>
        </div>
    </div>

and state:

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
  })

In the template you are already using HomeController like: <div ng-controller="HomeController">{{position}}</div>? — dinony
– dinony, Commented Oct 20, 2016 at 12:25
can you try this: .controller('HomeController', ['$scope', '$geolocation', function($scope, $geolocation) { $scope.model = {}; $geolocation.getCurrentPosition({ timeout: 6000 }).then(function(position) { $scope.model.position = position; $scope.myText = 'Text to show'; console.log(position); console.log($scope.model.position); }) } ]) In the template: {{model.position}}</br> {{myText}} Angular needs dotted notation for some objects to be resolved. — Mahesh
– Mahesh, Commented Oct 20, 2016 at 12:27
Try initializing position by $scope.position = {}; before the $geolocation.getCurrentPosition({ . — Sajan
– Sajan, Commented Oct 20, 2016 at 12:29
try to use {{position.timestamp}} inside the view and check what you get... maybe angular cant parse the geoposition object. — Vanojx1
– Vanojx1, Commented Oct 20, 2016 at 12:41

KhoPhi · Accepted Answer · 2016-10-20 12:47:13Z

1

Okay, I figured it out.

Had to to this, as in be specific with what I want from the position object

    <div class="callout clearfix" style="margin-top:20px;">
            <h5 class="float-center">Welcome Home.</h5>
            {{ position.timestamp }} <br/>
            {{ position.coords.latitude }} <br/> // this works 
            {{ myText }}
            <div ng-show="!position" class="float-center">
                <div class="loader">
                    <span>{</span><span>}</span>
                </div>
            </div>
        </div>

answered Oct 20, 2016 at 12:47

KhoPhi

9,57718 gold badges88 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't display $scope variable in view angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related