title: AngularJs leaflet directive map not rendering correctly on mobile with ionic
body: <p>I recently started to give Ionic a go and I use <a href="http://tombatossals.github.io/angular-leaflet-directive/#!/" rel="nofollow noreferrer">Angular Leaflet Directive</a>. for the geolocation to display</p>
  
  <p>All is okay, but I have a problem what I am not able to resolve.</p>
  
  <p>Everything is working on pc.</p>
  
  <p>But on mobile the paths are not showing up, and the map is gray</p>
  
  <p><a href="https://i.stack.imgur.com/c8EHf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c8EHf.png" alt="enter image description here"></a></p>
  
  <p>My Cotroller</p>
  
  <pre><code>.controller('ShowCtrl', function($scope, $stateParams, $ionicLoading, $timeout, $http, leafletData) {
  
    $ionicLoading.show({template: 'Downloading...'});
  
    $scope.center = {};
    $scope.paths = {};
    $scope.markers = {};
    $scope.defaults = {};
    $scope.map = {};
  
      $http({
      method: 'GET',
      url: 'https://api.foursquare.com/v2/venues/'+$stateParams.id,
       params: {
            'client_id'     : 'xxx',
            'client_secret' : 'xxx',
            'v'             : '20130815',
          }
    }).then(function successCallback(data) {
        $timeout(function () {
  
           $scope.place = data.data.response.venue;
           $scope.title = data.data.response.venue.name;
  
              angular.extend($scope, {
                  center: {
                      lat: $scope.lat,
                      lng:  $scope.long,
                      zoom: 12
                  },
                  paths: {
                      p1: {
                          color: '#ff612f',
                          weight: 5,
                          latlngs: [
                              { lat: data.data.response.venue.location.lat, lng: data.data.response.venue.location.lng },
                              { lat: $scope.lat, lng: $scope.long }
                          ],
                      }
                  },
                  markers: {
                      destination: {
                          lat: data.data.response.venue.location.lat,
                          lng: data.data.response.venue.location.lng,
                          message: data.data.response.venue.name,
                          focus: true,
                          draggable: false,
                          icon: {
                              iconUrl: 'lib/leaflet/dist/images/marker-icon2.png',
                          }
                      },
                      mylocation: {
                          lat: $scope.lat,
                          lng:  $scope.long,
                          icon: {
                              iconUrl: 'lib/leaflet/dist/images/marker-icon.png',
                          }
                      }
                  },
                  defaults: {
                      scrollWheelZoom: false,
                      zoomControl:false 
                  }
              });
            $ionicLoading.hide();
       }, 2000);
      });
  });
  </code></pre>
  
  <p>Map</p>
  
  <pre><code>&lt;leaflet id="map" center="center" paths="paths"  markers="markers" defaults="defaults"&gt;&lt;/leaflet&gt;
  </code></pre>
  
  <p>Could please someone give me a hand?</p>