title: setting css style from controller angularjs
body: <p>I've been at this for 30 minutes and cannot figure out what I am doing wrong... </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div ng-controller="main"&gt;
      &lt;div ng-style="mapheight"&gt;
          &lt;google-map center="center" zoom="zoom" style="height: inherit;"&gt;&lt;/google-map&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CONTROLLER:</p>
  
  <pre><code>angular.module('csApp.controllers', ["google-maps"]).
      controller("main", function($scope) {
          $scope.mapheight = "{'min-height':" + getHeight() + "px;}";
          $scope.center = {
              latitude: 45,
              longitude: -73
          };
          $scope.zoom = 8;
  
          function getHeight() {
              return (window.innerHeight * .70);
          }
      })
  </code></pre>
  
  <p>No style is being applied to my div at all.</p>
  
  <p>I can get it pass the variable when I put {{mapheight}} in my template but then I have to pass it to the style property, which is apparently not how I should do it.  </p>
  
  <p>What am I doing wrong here?  This is my first day with angular and I'm almost in tears because I can't even resize a div.</p>
  
  <p>Thank you!  </p>
  
  <p>here is the change in my controller:</p>
  
  <pre><code>  $scope.mapHeight = { 'min-height': getHeight() };
  </code></pre>