Angular ng-if not rendering div upon condition change
<p>I'm working on learning Angular with Google maps and having difficulty rendering a map within a div controlled by an ng-if directive.</p>

<p>For my application, I would like the map render upon receiving the coordinates from the $scope.location function. I would then click on a button and invoke $scope.myRide in order to place a marker on the map. However, what is happening is that the map does not render until I click on the button.
The coordinates within $scope.map are serve as placeholders until the actual coordinates are received from $scope.location.
Any assistance will be greatly appreciated :)</p>

<pre><code>angular.module('MapView',[])
.config(function($stateProvider){
    $stateProvider
    // the state will go on the html that you want route the user.
    .state('mapView', {
        url: '/mapView',
        templateUrl: 'app/mapView/mapView.html',
        controller: function($scope){
            $scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
            $scope.output = document.getElementById("loc");
            $scope.maker = {};

            $scope.coords = {};

            $scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]

            $scope.location = function(){
                if (!navigator.geolocation){
                  output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
                  return;
                }
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log('current position',position.coords)
                   $scope.map.center.latitude = position.coords.latitude;
                   $scope.coords.lat = position.coords.latitude; //added this
                   $scope.map.center.longitude = position.coords.longitude;
                   $scope.coords.lon = true; // added this
                }, function(){
                  $scope.output.innerHTML = "Unable to retrieve your location";
                });
            }()


             $scope.myRide = function(){
                $scope.maker.latitude = $scope.map.center.latitude;
                $scope.maker.longitude = $scope.map.center.longitude;
             }
        },
        controllerAs: 'LoginCtrl'
    });
})
</code></pre>

<p>The following is the HTML:</p>

<pre><code>&lt;div ui-sref='mapView' &gt;

  &lt;div ng-show = "coords.lon == true"&gt;Hello&lt;/div&gt;

    &lt;div id="loc"&gt;&lt;/div&gt;


    &lt;div id="mapDiv" ng-if="coords.lon"&gt;
        &lt;ui-gmap-google-map center='map.center' zoom='map.zoom' maker=&gt;
            &lt;ui-gmap-marker  coords="maker" icon="icon" idkey="1"&gt;&lt;/ui-gmap-marker&gt; 
        &lt;/ui-gmap-google-map&gt;
    &lt;/div&gt;

    &lt;div class="btn-Center"&gt;
        &lt;button class="btn btn-danger" ng-click='myRide()' &gt;Ride&lt;/button&gt;
    &lt;/div&gt;

    &lt;div id="mapUsers"&gt;
        &lt;div class="clear" ng-repeat='user in mockUsers'&gt;
            &lt;div class="mapUserImg"&gt;
                &lt;img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png"&gt;
            &lt;/div&gt;
            &lt;h1&gt; {{ user.username }} &lt;/h1&gt;
            &lt;p&gt; {{ user.mess}} &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>