View only recompiles on map pan/zoom

[that1guy]

Note: This only happens on Safari Mobile! Not on desktop.

Watch this screencast to observe the issue:
https://screencast.com/t/ElXYloDCyt

Notice the banner at the top of the screen does not update unless I pan or zoom the map.

Here is what is in the view:

<div class="select-areas-header" ng-show="searchOptions.selectAreas || savedSearch.forceAreaSelection">
	<span id="exit-select-areas">
          <b>Select Areas Mode {{map.selectedAreas}}</b><span>{{!map.selectedAreas.length ? ' | Cancel' : ' | Done Selecting'}}</span>
        </span>
</div>

Here is what is in my controller:

//Keep map in sync with propertyFactory and mapFactory
  $scope.map = propertyFactory.map = mapFactory.map;

And here is the function that runs in my mapFactory when the user clicks an area on the map

function appendToSelectedAreas(layer) {
    layer.setStyle({
      fillColor: 'grey'
    });
    layer.bringToFront();

    factory.map.selectedAreas.push({
      _id: layer.feature._id,
      layer: layer,
      title: layer.feature.properties.boundary.name,
      coordinates: layer.feature.geometry.coordinates
    });
  }