Dynamically update position on Angular-Google-Maps-Native <p>Using the Angular-Google-Maps-Native plugin, when I change the information in JavaScript, my map is not updating. I believe my problem is the $scope for the map, versus the controller I am running.</p> <p><a href="https://i.stack.imgur.com/C2Rrp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C2Rrp.png" alt="Missing Title that is Hard Coded"></a></p> <p>Sub Sample of HTML</p> <pre><code>&lt;md-content flex id="content" class="md-whiteframe-z2"&gt; &lt;div ng-init="coords={latitude: false, longitude: false}"&gt; &lt;gm-map options="{center: [{{ScheduleCard.Latitude}}, {{ScheduleCard.Longtitude}}], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}"&gt; &lt;gm-marker options="{position: [{{ScheduleCard.Latitude}}, {{ScheduleCard.Longtitude}}], draggable: false}"&gt; &lt;gm-infowindow options="{content: '{{ScheduleCard.VenueName}}'}"&gt;&lt;/gm-infowindow&gt; &lt;/gm-marker&gt; &lt;/gm-map&gt; &lt;/div&gt; &lt;/md-content&gt; </code></pre> <p>Sample of JavaScript controller</p> <pre><code>angular.module('MyApp').controller('ScheduleCtrl', ["$scope", ... function($scope, ...) { //code here to load from Firebase $scope.ScheduleCard = {}; $scope.ScheduleCard.VenueName = ''; $scope.ScheduleCard.Latitude = 43.630; // Initial Area $scope.ScheduleCard.Longtitude = -79.699; // reposition map based on this data $scope.LoadScheduleCard = function(ScheduleInfo) { $scope.ScheduleCard.VenueName = ScheduleInfo.VenueName; $scope.ScheduleCard.Latitude = ScheduleInfo.Latitude; $scope.ScheduleCard.Longtitude = ScheduleInfo.Longtitude; }; </code></pre> <p>Aditional side menu code for LoadScheduleCard()</p> <pre><code>&lt;!-- Container #3 --&gt; &lt;md-sidenav md-is-locked-open="true" class="md-whiteframe-z2"&gt; &lt;md-list&gt; &lt;md-list-item class="md-3-line" ng-repeat="schedule in Schedules" md-ink-ripple layout="row" layout-align="start center"&gt; &lt;md-item-content&gt; &lt;div class="inset" ng-click="LoadScheduleCard(schedule)"&gt; &lt;ng-md-icon icon="today"&gt;&lt;/ng-md-icon&gt; &lt;b class="md-subhead"&gt; {{schedule.GameDate | SLS_Date}} @ {{schedule.GameTime | SLS_Time:'hh:mm'}}&lt;br /&gt; &lt;ng-md-icon icon="place"&gt;&lt;/ng-md-icon&gt; {{schedule.VenueName}}&lt;br /&gt; &lt;ng-md-icon icon="games"&gt;&lt;/ng-md-icon&gt; {{schedule.HomeTeamName}} vs. {{schedule.AwayTeamName}}&lt;br /&gt; &lt;ng-md-icon icon="thumb_up" ng-show="schedule.Wins &gt; 0"&gt;&lt;/ng-md-icon&gt; &lt;ng-md-icon icon="thumb_down" ng-show="schedule.Losses &gt; 0"&gt;&lt;/ng-md-icon&gt; &lt;ng-md-icon icon="thumbs_up_down" ng-show="schedule.Ties &gt; 0"&gt;&lt;/ng-md-icon&gt; &lt;/b&gt; &lt;/div&gt; &lt;/md-item-content&gt; &lt;md-divider&gt;&lt;/md-divider&gt; &lt;/md-list-item&gt; &lt;/md-list&gt; &lt;/md-sidenav&gt; </code></pre>