user3632106 user3632106 - 4 months ago 73x
AngularJS Question

Close dropdown menus on click on other menu item or body (Angularjs)

Can anyone help me? I have various dropdown menus on my application and I'am trying to close them on click on other menu items and on click on body. I'am using angular.js without jQuery.


<div ng-controller="SomeController as controller">
<div class="select-box">
<div class="select-box-field" ng-click="dropdown = !dropdown;">
<span>Menu Name</span>
<div class="select-box-field-dropdown" ng-class="{ 'is-active':dropdown }">
<span>Dropdown menu Item 1</span>
<span>Dropdown menu Item 2</span>


(function() {

var app = angular.module('application');

app.controller('SomeController', someCtrl);

function someCtrl () {

var vm = this;
vm.dropdown = false;


Here is the fiddle



You can call the same unction from the container and call $event.stopPropagation()

See this updated fiiddle You can set dropdown value in ng-click

<div class="select-box-field" ng-click="change(1)">


<div class="select-box-field" ng-click="change(1)">

and in controller the function change()

.controller("Ctrl1", function($scope, $element)
      $scope.change = function(a) {



see this fiddle for full working demo