title: How do I open a modal from a controller using Angular-materialize
body: <p>I am using Materialize CSS and the Angular-materialize directives:</p>
  
  <p><a href="http://materializecss.com/modals.html" rel="nofollow">http://materializecss.com/modals.html</a></p>
  
  <p><a href="http://krescruz.github.io/angular-materialize/#modals" rel="nofollow">http://krescruz.github.io/angular-materialize/#modals</a></p>
  
  <p>I am trying to do the following</p>
  
  <ol>
  <li>User clicks button</li>
  <li>Controller action gets fired and we go get data from an api</li>
  <li>Modal is displayed to user and data returned is displayed</li>
  </ol>
  
  <p>I have the following button</p>
  
  <pre><code>&lt;a href="#MyModal" modal class="my-modal-trigger waves-effect waves-green btn right"Show Data/a&gt;
  </code></pre>
  
  <p>and modal</p>
  
  <pre><code>&lt;div id="MyModal" class="modal"&gt;
      &lt;div class="modal-content center"&gt;
          &lt;div class="row"&gt;
              &lt;div class="row left"&gt;
                  &lt;div class="card blue-grey darken-1"&gt;
                      &lt;div class="card-content white-text"&gt;
                          &lt;span class="card-title"&gt;Data&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;ul class="collection"&gt;
                              //loop the data
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a  class="modal-action modal-close waves-effect waves-green btn"&gt;Close&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and i have the following in my JS</p>
  
  <pre><code>var app = angular.module("MyApp", ['ngRoute', 'ui.materialize']);
  </code></pre>
  
  <p>How can i call a controller method to pop up the modal and fill it with data, from my controller</p>
  
  <pre><code>app.controller('mainController', function ($scope, $location, $http, AppConfig) {
  
      var params = { some stuff}
  
      $http({
          method: 'POST',
          url: myURL,
          headers: {
              'Content-Type': 'text/html',
              'Accept': 'application/json'
          },
          params: params
      })
          .success(function (data) {
              //pop up the modal and show the data
              Materialize.toast('Awesome, we got the data', 4000);
          })
          .error(function (status) {
              Materialize.toast('Bad stuff happened', 4000);
          });
  });
  </code></pre>