title: Understanding $scope and in angularjs
body: <p>I created this snippet using html5 geolocation api.
  If the user allow and display the lat,lng with <code>{{lat}}</code></p>
  
  <p>I don't understand why the lat only display in second click.
  I thought the showPosition() has already triggered?
  You can see it show in console in the first click.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
  {{lat}}
    &lt;button ng-click="getLocation()"&gt;Click&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.getLocation = function() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        alert("Geolocation is not supported by this browser.");
      }
    }
    function showPosition(position) {
      $scope.lat = "Latitude: " + position.coords.latitude;
      $scope.lng = "Longitude: " + position.coords.longitude; 
      console.log($scope.lat);
    }
  });
  </code></pre>