Materializecss dropdown doesn't work with AngularJS

I am developing a web application using Materializecss and AngularJS for the frontend, my problem is that the materialize menu dropdown is not working for me.

Here's a dropdown example on my site

$( document ).ready(function(){

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="components.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>

Run codeHide result

On his site, it works, but mine is not the case, and I am guessing it should do something with the href="#!"

dropdown button part , because maybe AngularJS is trying to map a route or something

If this is a problem, then how can I get AngularJS to ignore some of the hrefs? Because to execute the dropdown menus and modals I need those href="#!"

, and if not, what is the problem and how can I fix it?

I tried to remove the href or change it with href=""

, but it didn't work.


source to share

3 answers

Be careful to mix the frames, they can and are likely to have unexpected effects. In terms of showing and hiding items, here's a simple example of how to hide, show, or toggle any item.

( demo )


<a href="javascript:void()" data-show="hidden">Show</a>
<a href="javascript:void()" data-hide="hidden">Hide</a>
<a href="javascript:void()" data-toggle="hidden">Toggle</a>
<div id="hidden"><!-- This can be any type of element -->
    <!-- Anything in here -->



#hidden {
    display: none;



$("[data-show]").on("click", function () {
    $("#" + $(this).attr("data-show")).css("display", "initial");
$("[data-hide]").on("click", function () {
    $("#" + $(this).attr("data-hide")).css("display", "none");
$("[data-toggle]").on("click", function () {
    var target = $("#" + $(this).attr("data-toggle"));
    if (target.css("display") === "none") {
        target.css("display", "initial");
    } else {
        target.css("display", "none");


I used jQuery here because you used jQuery in your script, this can be done easily in pure JavaScript as well. Make sure to put JavaScript after the DOM, otherwise wrap your script in a handler document.onload




I recently ran into a similar situation. I have also used Materializecss with AngularJS.

Here is my solution in CodePen:

I basically kept your sample above with a few minor changes. Below is the code snippet for the AngularJS part.

Please take a look at the nib settings in the example and include external JS files in your project. These are mostly jQuery, Materialize, Angular libraries.

var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
  console.log("In Angular MainCtrl");

  $scope.items = [
    {text: "Bing", url: ""},   
    {text: "ZDNet", url: ""},
    {text: "CNet", url: ""}

    belowOrigin: true, 
    alignment: 'left', 
    inDuration: 200,
    outDuration: 150,
    constrain_width: true,
    hover: false, 
    gutter: 1




What is angular var and where is this var imported?



All Articles