$scope value not showing in view
<p>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</p>

<p><strong>index.html</strong></p>

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

    &lt;link rel="manifest" href="manifest.json"&gt; 
    &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;



    &lt;!-- ionic/angularjs js --&gt;
    &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
    &lt;script src="lib/ngGeolocation/ngGeolocation.min.js"/&gt;

    &lt;!-- cordova script (this will be a 404 during development) --&gt;
    &lt;script src="cordova.js"&gt;&lt;/script&gt;

    &lt;!-- your app's js --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/controller.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="starter"&gt;
  &lt;ion-nav-view &gt;&lt;/ion-nav-view&gt;

  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>angular.module('starter', ['ionic','starter.controllers','ui.router'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova &amp;&amp; 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');

  });
</code></pre>

<p><strong>my controller</strong> </p>

<pre><code>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);

      });
    })
</code></pre>

<p>in the console i am able to see the data </p>

<p><strong>Login.html</strong></p>

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

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

<p>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 </p>