title: AngularJS directive to modal dialog
body: <p>I would like to send a value from button data-id to a modal dialog.</p>
  
  <p>I have wrote this : </p>
  
  <p><strong>Button HTML</strong></p>
  
  <pre><code>&lt;button ui-sref=".modal" btn-attr-click data-id="{{data.nip}}"&gt;Simulasi&lt;/button&gt;
  </code></pre>
  
  <p><strong>State angular :</strong></p>
  
  <pre><code>var routerApp = angular.module('routerApp', ['ui.router','agGrid','angular.filter','ngAnimate']);
  
  routerApp.config(function($stateProvider, $urlRouterProvider) {
  
          .state('masterpegawai.alltalenta.modal', {
              url: '/modal',
              views:{
                  "modal": {
                      templateUrl : 'public/js/modal.html'
                  }
              }
           })
  
  }
  
  });
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>routerApp.directive('btnAttrClick', function() {
    return {
      controller: 'simulate',
      link: function(scope, element, attr) {
        element.on('click', function() {
          scope.nip = attr.id;
        })
      }
    }
  })
  </code></pre>
  
  <p><strong>The Modal dialog</strong></p>
  
  <pre><code>&lt;div class="modal-overlay fade"&gt;
    &lt;div class="modal-content"&gt;
    &lt;h2&gt;Modal&lt;/h2&gt;
    This modal has a substate.  &lt;a ui-sref=".substate"&gt;{{nip}}&lt;/a&gt;
    &lt;div ui-view='modal'&gt;&lt;/div&gt;
    &lt;a ui-sref="app"&gt;{{nip}}&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The modal does shows up but the value of data-id={{data.nip}}" doesn't shown in modal dialog</p>