title: materializecss and angular app
body: <p>I'm trying to build an app in <code>angularJS</code> and <code>materializeCSS</code>. The page loads, but I have a button that should open a pop-up form and although I tried several times, I can't figure out the problem :(</p>
  
  <p>I've tried with <code>&lt;a href&gt;</code> but it's the same problem, I can't see any pop and as well, I don't see any errors in the console</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Products&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="libs/css/materialize.min.css" /&gt;
  
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /&gt;
  &lt;style&gt;
  .width-30-pct{
      width:30%;
  }
  
  .text-align-center{
      text-align:center;
  }
  
  .margin-bottom-1em{
      margin-bottom:1em;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container" ng-app="myApp" ng-controller="productsCtrl"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col s12"&gt;
                  &lt;h4&gt;Products&lt;/h4&gt;
                  &lt;!-- used for searching the current list --&gt;
                  &lt;input type="text" ng-model="search" class="form-control" placeholder="Search product..."/&gt;
  
      &lt;!-- table that shows product record list --&gt;
              &lt;table class="hoverable bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th class="text-align-center"&gt;ID&lt;/th&gt;
                          &lt;th class="width-30-pct"&gt;Name&lt;/th&gt;
                          &lt;th class="width-30-pct"&gt;Description&lt;/th&gt;
                          &lt;th class="text-align-center"&gt;Price&lt;/th&gt;
                          &lt;th class="text-align-center"&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody ng-init="getAll()"&gt;
                  &lt;tr ng-repeat="d in names | filter:search"&gt;
                      &lt;td class="text-align-center"&gt;{{ d.id }}&lt;/td&gt;
                      &lt;td&gt;{{ d.name }}&lt;/td&gt;
                      &lt;td&gt;{{ d.description }}&lt;/td&gt;
                      &lt;td class="text-align-center"&gt;{{ d.price }}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;a ng-click="readOne(d.id)" class="waves-effect waves-light btn margin-bottom-1em"&gt;&lt;i class="material-icons left"&gt;edit&lt;/i&gt;Edit&lt;/a&gt;
                          &lt;a ng-click="deleteProduct(d.id)" class="waves-effect waves-light btn margin-bottom-1em"&gt;&lt;i class="material-icons left"&gt;delete&lt;/i&gt;Delete&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
                  &lt;!-- floating button for creating product --&gt;
              &lt;div class="fixed-action-btn" style="bottom:45px; right:24px;"&gt;
                  &lt;!-- &lt;a class="btn-floating btn-large waves-effect waves-light red" href="#modal1" ng-click="showCreateForm()"&gt;&lt;i class="material-icons"&gt;add&lt;/i&gt;&lt;/a&gt; */--&gt;
                  &lt;button data-target="modal1"  class="btn-floating btn-large waves-effect waves-light red" ng-click="showCreateForm()"&gt;Add&lt;/button&gt;
              &lt;/div&gt;
              &lt;!-- modal for for creating new product --&gt;
              &lt;div id="modal1" class="modal"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;h4 id="modal-product-title"&gt;Create New Product&lt;/h4&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="input-field col s12"&gt;
                              &lt;input ng-model="name" type="text" class="validate" id="form-name" placeholder="Type name here..." /&gt;
                              &lt;label for="name"&gt;Name&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="input-field col s12"&gt;
                              &lt;textarea ng-model="description" type="text" class="validate materialize-textarea" placeholder="Type description here..."&gt;&lt;/textarea&gt;
                              &lt;label for="description"&gt;Description&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="input-field col s12"&gt;
                              &lt;input ng-model="price" type="text" class="validate" id="form-price" placeholder="Type price here..." /&gt;
                              &lt;label for="price"&gt;Price&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="input-field col s12"&gt;
                              &lt;a id="btn-create-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="createProduct()"&gt;&lt;i class="material-icons left"&gt;add&lt;/i&gt;Create&lt;/a&gt;
  
                              &lt;a id="btn-update-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="updateProduct()"&gt;&lt;i class="material-icons left"&gt;edit&lt;/i&gt;Save Changes&lt;/a&gt;
  
                              &lt;a class="modal-action modal-close waves-effect waves-light btn margin-bottom-1em"&gt;&lt;i class="material-icons left"&gt;close&lt;/i&gt;Close&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"&gt;
  
  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;!--angular --&gt;
      &lt;script src="libs/js/angular.min.js"&gt;&lt;/script&gt;
  
  
      &lt;script&gt;
  // angular js codes will be here
  var app = angular.module('myApp', []);
  app.controller('productsCtrl', function($scope, $http) {
  
       $scope.showCreateForm = function(){
     // clear form
      $scope.clearForm();
  
      // change modal title
      $('#modal-product-title').text("Create New Product");
  
      // hide update product button
      $('#btn-update-product').hide();
  
      // show create product button
      $('#btn-create-product').show();
  
  
  }
  
       // clear variable / form values
  $scope.clearForm = function(){
      $scope.id = "";
      $scope.name = "";
      $scope.description = "";
      $scope.price = "";
  }
  
  
  
      // create new product 
      $scope.createProduct = function(){
  
      // fields in key-value pairs
      $http.post('create_product.php', {
              'name' : $scope.name, 
              'description' : $scope.description, 
              'price' : $scope.price
          }
      ).success(function (data, status, headers, config) {
          console.log(data);
          // tell the user new product was created
          Materialize.toast(data, 4000);
  
          // close modal
          $('#modal-product-form').closeModal();
  
          // clear modal content
          $scope.clearForm();
  
          // refresh the list
          $scope.getAll();
      });
      }
  
   });
  // jquery codes will be here
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>