title: Angular Set Dynamic Height for element of his parent div
body: <p>I have the following scenario:</p>
  
  <pre><code> &lt;div class="parent" style="height:100%"&gt;
          &lt;div class="left" style="float:left" dynamic-height element-id="{{$index}}"&gt;
          &lt;/div&gt;
          &lt;div class="right" style="float:left"&gt;
              &lt;div&gt;Element 1&lt;/div&gt;
              &lt;div&gt;Element 2&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying that the left element will be at the same height as the .right or the .parent, i tried to add directive for that, with not much success, anyone have a better idea?</p>
  
  <p>the directive:</p>
  
  <pre><code>.directive('dynamicHeight', function() {
      return {
          compile: function compile(tElement, tAttrs, transclude) {
              return {
                  post: function postLink(scope, elem, attrs) {
                      var element = "#discussion-element-"+ attrs.elementId;
                      var myEl = angular.element( document.querySelector( element) );
                      var height = myEl[0].offsetHeight;
                      element.height(height);
                  }
              }
          }
      };
  });
  </code></pre>
  
  <p>Image that illustrate the issue:</p>
  
  <p><img src="https://i.stack.imgur.com/PdI8n.png" alt="enter image description here"></p>