title: Leaflet full screen in Ionic-Cordova-Angular app
body: <p>I'm working on a mapping app using Ionic-Cordova-Angular and am trying to use Leaflet. My issue is that I can't get the Leaflet map to automatically fill the entire viewport.</p>
  
  <p>I found the solution when using straight JS. You can use CSS to set the HTML and Body to a height of 100% and then set the map div to 100% as well. You can see this working in this JSFiddle: <a href="https://jsfiddle.net/wzfLs10a/" rel="nofollow">https://jsfiddle.net/wzfLs10a/</a></p>
  
  <p>Unfortunately, the same solution does not work when I introduce Angular into the mix. Here's some sample code:</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;div id="map" ng-app="demoapp" ng-controller="MainCtrl"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>angular.module("demoapp", ["controllers"]);
  
  angular.module('controllers',[])
  
     .controller('MainCtrl',['$scope',
      function($scope) {
          $scope.map = L.map('map').setView([37.8, -96], 4);            
          L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
          attribution: 'Tiles Courtesy of &lt;a href="http://www.mapquest.com/"&gt;MapQuest&lt;/a&gt; &amp;mdash; Map data &amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;',
          subdomains: '1234'
      }).addTo($scope.map);
  
      }]);
  </code></pre>
  
  <p><strong>Style.css</strong></p>
  
  <pre><code>html, body { height: 100%; width: 100%;}
  #map { height: 100%;}
  </code></pre>
  
  <p>Here's a JSFiddle: <a href="https://jsfiddle.net/3sv374Lz/" rel="nofollow">https://jsfiddle.net/3sv374Lz/</a>. Note that if you change the height of the map div to a fixed value (400px for example), the map will display.</p>
  
  <p>I am aware of the angular leaflet directive and am currently exploring that option as well, but it seems to me this really shouldn't be that difficult. Am I missing something simple? Thanks for the help!</p>