Angular ng-if not rendering div upon condition change

Question

I'm working on learning Angular with Google maps and having difficulty rendering a map within a div controlled by an ng-if directive.

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 :)

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 = "<p>Geolocation is not supported by your browser</p>";
                  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'
    });
})

The following is the HTML:

<div ui-sref='mapView' >

  <div ng-show = "coords.lon == true">Hello</div>

    <div id="loc"></div>


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

    <div class="btn-Center">
        <button class="btn btn-danger" ng-click='myRide()' >Ride</button>
    </div>

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

</div>

Answer 1

I have some recomendations,

1) for debugging you can install the chrome extension ng-inspector in there you can view what value you have in center and zoom when you are in the html side, check if the data have sense.

2) i thing you use angular-google-maps from angular-ui if is true, you have two errors,

    <div id="mapDiv" ng-if="coords.lon">
    <ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
        <ui-gmap-marker  coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker> 
    </ui-gmap-google-map>

marker empty is not necesesary and icon do are inside to options like the example in the official website.

<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
    </ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
    <ul>
        <li>coords update ctr: {{coordsUpdates}}</li>
        <li>dynamic move ctr: {{dynamicMoveCtr}}</li>
    </ul>
</div>

3) in the anglar-google-maps website you can use Edit in Plnkr for made some first test to familiarize with this directives