title: AngularJS - How to get offset of top and left position of an element in document
body: <p>looking for guru help,
  I'm using angularJS in a repeating list in the code below. How would I get the the absoulute position or relative to the document of the top and left offset position for 'div class="section"' and print it in the console?
  Is it it possible with AngularJs or do I need to use Jquery?</p>
  
  <p>Ultimately my goal is get the offset positions and use it to position a modal window, but if I could get help on the above I should be able to figure the rest out. </p>
  
  <p>My code is below and thanks in advance:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body ng-controller="MyMgtCtrl"&gt;
      &lt;div class="container-fluid" &gt;
          &lt;div class="section"&gt;{{gapSection.headerID}}.{{gapSection.sectionID}}&lt;/div&gt;
          &lt;label ng-click="showMenu()" class="label label-primary"&gt;Toggle&lt;/label&gt;
      &lt;/div&gt;&lt;!-- /.container --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Angular Controller</strong></p>
  
  <pre><code>var myMgtApp = angular.module("myMgtApp");
  
  myMgtApp.controller("MyMgtCtrl",function($scope){
      var data={
          showMenu:false,
          gapSection:[{headerID:1,sectionID:1,requirement:"SOME DATA 1"},
          {headerID:2,sectionID:1,requirement:"SOME DATA"},
          {headerID:2,sectionID:2,requirement:"SOME DATA 3"}]
      };
  
      $scope.data = data;
      $scope.gapSection = data.gapSection;
      $scope.showMenu=function($scope){
          data.showMenu=!data.showMenu;
      };
  });
  </code></pre>