title: angularjs : how to get width from a $element in directive without using jquery
body: <p>I try to get a width from a $element in directive. but, it continues to return 0.</p>
  
  <p>Can you tell me what is the problem? and, can you tell me the solution?</p>
  
  <p>To see problem, i've created a demo : </p>
  
  <ul>
  <li><p>directive</p>
  
  <pre><code>angular.module('testApp').directive('testDirective', testDirective)
  function testDirective() {
      return {
          restrict: 'E',
          controller: 'TestController',
          controllerAs: 'vm',
          bindToController: true,
          scope: {}
      }
  }
  </code></pre></li>
  <li><p>controller</p>
  
  <pre><code>angular.module('testApp').controller('TestController', TestController);
  
  TestController.$inject = ['$element'];
  
  function TestController($element) {
      var vm = this;
  
      init()
  
      function init(){
      vm.elWidth0 = $element.find("div")[0].clientWidth; 
      vm.elWidth1 = $element.find("div")[0].offsetWidth; 
      vm.elWidth2 = $element.prop('clientWidth'); 
      console.log(vm.elWidth0); //return 0
      console.log(vm.elWidth1); //return 0
      console.log(vm.elWidth2); //return 0
      }
  }
  </code></pre></li>
  <li><p>html</p>
  
  <pre><code>&lt;test-directive&gt;
      &lt;div&gt;
          &lt;button&gt;a&lt;/button&gt;
          &lt;button&gt;c&lt;/button&gt;
          &lt;button&gt;d&lt;/button&gt;
          &lt;button&gt;e&lt;/button&gt;
          &lt;button&gt;f&lt;/button&gt;
      &lt;/div&gt;
  &lt;/test-directive&gt;
  </code></pre></li>
  </ul>
  
  <p>Thank you for your advice</p>