title: Vertical progress bar in angular.js not showing proper height
body: <p>I am trying to create my own vertical progress bar, and am thinking of animating it via CSS3. I have currently set it up as a angular directive, where upon clicking, it should change the height property of the inner div. However, when I console.log(element.children().css('height')), it is returning me a blank value, even though I have already set the initial height to 10%?</p>
  
  <p>angular.js directive</p>
  
  <pre><code>teacherApp.directive('clickToChangeHeight', function(){
    return {
      link: function(scope, element, attrs) {
        element.bind('click', function() {
          var height = element.children().css('height');
          console.log(height)
          //element.children().css('height', finalHeight);
        });
      }
    }
  })
  </code></pre>
  
  <p>jade markup</p>
  
  <pre><code>div(ng-controller='TvCtrl')
    .outer(click-to-change-height)
      .inner
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.outer {
    position: relative;
    overflow: hidden;
    width: 30px;
    height: 140px;
    border: 2px solid #ccc;
  }
  
  .inner {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: #999;
    -webkit-transition: height 2s;
  }
  </code></pre>