$scope value not showing in view

Question

I am trying to display the response in my view.....I am getting data in my controller but the data is not showing in view

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json"> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">



    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngGeolocation/ngGeolocation.min.js"/>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="starter">
  <ion-nav-view ></ion-nav-view>

  </body>
</html>

app.js

angular.module('starter', ['ionic','starter.controllers','ui.router'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('Login', {
        cache: false,
        url: '/Login',
        views: {
          '': {
            templateUrl: 'Templates/Login.html',
            controller: 'loginCtrl',
          }
        }
      })

    $urlRouterProvider.otherwise('/Login');

  });

my controller

var app=angular.module('starter.controllers',['ngGeolocation']);
    app.controller('loginCtrl',function($geolocation, $scope){
      $scope.test="test string";
      $geolocation.getCurrentPosition({
      }).then(function(position) {
        $scope.myPosition = position;
        console.log($scope.myPosition);

      });
    })

in the console i am able to see the data

Login.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="main">
  <pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>

I can only see first pre tag data, the second is always '{}'

I tried to create a plunker but its giving a warning for $geolocation and that function is escaping from execution.. Any help will be appreciated...tq

Can you show all the HTML code? I can not see if there is an ng-controller called in the HTML — Jeff, Oct 21 '16 at 12:58
@jeff if the problem is that as u mentioned.....the first pre tag will also blank right? — , Oct 21 '16 at 13:05
@satyachowdary if there is no controller called on the page there is no say to show the value in the HTML. — Jeff, Oct 21 '16 at 13:14
in that case i am getting the
{{test}}
value as test string in my view — , Oct 21 '16 at 13:21
Without seeing all of your code it is a bit difficult to know what is wrong. — Jeff, Oct 21 '16 at 13:31
Just to assist, I created a [fiddle](https://jsfiddle.net/jktkq8tL/5/) based on the error I'm getting, it is worth reading [this](http://stackoverflow.com/questions/9731963/navigator-geolocation-getcurrentposition-always-fail-in-chrome-and-firefox) — Corporalis, Oct 21 '16 at 13:35
the binding here seems to be fine, but the returned object isn't being parsed by the browser. a fork of @Corporalis fiddle https://jsfiddle.net/194mp0ha/ with the only change `{{myPosition.coords.latitude}}` definitely shows data, and if there were no binding, you would have a blank instead of `{ }`; the `{ }` is just the generic output when the object properties can't be displayed. — Claies, Oct 21 '16 at 13:49
The funny thing is now I am home, the fiddle returns an object correctly. My work network happened to block the call and resulted in what I posted. I think it's still useful information, but I'll update the answer to better explain my findings — Corporalis, Oct 21 '16 at 21:47

score 0 · Accepted Answer · answered Oct 21 '16 at 13:49

0

Your $scope.myPosition is a Geoposition object. That object contains a coords object that contains the values for latitude and longitude (among others). Change your view like so:

{{myPosition.coords.latitude}}

Hope this helps.

answered Oct 21 '16 at 13:49

Matt M

3,699
5
48
76

score 0 · Answer 2 · answered Oct 21 '16 at 13:52

0

I just tried on the jfiddle. Write this to see the latitude:

 `<pre>{{myPosition.coords.latitude}}</pre>`

and make sure location settings is ENABLED in your computer and it will show the correct value.

answered Oct 21 '16 at 13:52

Beslinda N.

4,808
5
27
33

score 0 · Answer 3 · edited May 23 '17 at 12:09

I spent a bit of time generating a https://jsfiddle.net/jktkq8tL/6/. Most notably adding an error function,

 $geolocation.getCurrentPosition({
  }).then(function(position) {
    $scope.myPosition = position;
    console.log($scope.myPosition);

  },function(data) {
    console.log(data.error.message);
  });

which highlighted an error:

Network location provider at 'https://www.googleapis.com/' : No response received.

Once I had received this error, I performed a search and found this SO answer. Which states:

I simulated this problem and found that the success callback functions were only called when the html page was hosted on a web server and not when opened from a filesystem.

So this is worth investigating.

$scope value not showing in view

3 Answers3