title: Materialize drop down (open dropdown programatically)
body: <p>Materializecss dropdown:
  I am using drop-down from the materializecss framework in angularjs code.
  I want to open it programmatically using <code>$('.dropdown-button').dropdown('open');</code></p>
  
  <p>Can someone help me in making the below demo to work?
  Note: <strong>Make it work programmatically so don't use data-activates</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Hello world';
    $(document).ready(function() {
      $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrainWidth: false,
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left',
        stopPropagation: false // Stops event propagation
      });
    });
  
    $scope.openDropDown = function() {
      alert('opening drop-down');
      $('.dropdown-button').dropdown('open');
    };
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"&gt;
  
  &lt;!-- Compiled and minified JavaScript --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div ng-controller='MyController' ng-app="myApp"&gt;
    &lt;div&gt;{{title}}&lt;/div&gt;
  
    &lt;!-- Dropdown Trigger --&gt;
    &lt;a class='dropdown-button btn' href='#' ng-click="openDropDown()"&gt;Drop Me!&lt;/a&gt;
  
    &lt;!-- Dropdown Structure --&gt;
    &lt;ul id='dropdown1' class='dropdown-content'&gt;
      &lt;li&gt;&lt;a href="#!"&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#!"&gt;two&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#!"&gt;three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#!"&gt;&lt;i class="material-icons"&gt;view_module&lt;/i&gt;four&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#!"&gt;&lt;i class="material-icons"&gt;cloud&lt;/i&gt;five&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>