Why can't I set the height of an element with ng-style?

Question

I am trying to add dynamically set the height of a div, but it is not successfully being set. I get the height of window and divide it by 3, but it is not working. Here is where I set the height:

<div id="wrapper" ng-style="height :hgt+'px'">

I am setting the scope variable like this:

 $scope.hgt = $window.innerHeight / 3;

But the height isn't set.

Plunker http://plnkr.co/edit/eGaPwUdPgknwDnozMJWU?p=preview

Answer 1

The usage of ng-style is slightly counter-intuitive. You're attempting to use it to interpolate values, but per the Angular documentation ng-style takes an expression "which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys."

Thus, you might want to try:

$scope.hgt = { height: ($window.innerHeight / 3) + 'px' };
<div id="wrapper" ng-style="hgt">

Hope this helps!

Answer 2

You should put a dictionary in ng-style like below

<div id="wrapper" ng-style="{height: '{{hgt}}px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>