Schlaus Schlaus - 10 months ago 129
AngularJS Question

How to manually toggle angular-ui-select dropdown

I'm using AngularUI's ui-select to create several multiselects on a page. I need to be able to open the dropdown list when a user clicks on a button on the page.

I've tried using jQuery's

on the element, but these result in a
$apply already in progress
error when called by in the button's
function. They work when called from Chrome's console though. The function in
doesn't do anything besides simulating another click.

doesn't do anything, besides focusing the input.

I also reluctantly tried a nasty hack, where I used the select's
to store it's controller to a scope the button has access to, and then using the controller's
methods. This gave focus to the input, but the associated dropdown list wont open.

How can I toggle the dropdown manually, from outside the ui-select element's context?

Here's a Plunker you can play with.

Answer Source

I have tried and could be achieved by directive method. working fiddle

  .module('myApp', [
  .controller('testController', function ($scope) {
    $scope.things = ['item1', 'item2'];
    $scope.clickOnInput = function() {
  .directive('openMenuByClick', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
               element.bind('click', function () {

                 $timeout(function () {


Add this attribute directive to your button

<button id="btn" open-menu-by-click="searchBarArea">Click me</button>