The web application I’m currently developing is using https://angularjs.org/ and http://getbootstrap.com/ because, well, I’m an angularjs fan and I suck at layout. Guess the latter is pretty obvious from the theme the site is running right now.

I’ve found 2 options to use angularjs with bootstrap: the first being http://angular-ui.github.io/bootstrap/  and the second http://mgcrea.github.io/angular-strap/ . There are pro’s and cons to both of them and I prefer AngularStrap because it appears to offer the things I need right now. And I think the animations shipped with AngularStrap look better…

I wanted to use the the multi-select button option (http://mgcrea.github.io/angular-strap/#/buttons#selects) with a plain javascript array and noticed there’s no sample for it on the site, so here it is:

In your controller:

$scope.topic = {
  options: ['option1', 'option2', 'option3'],
  selected_options: []
}

In your template:

  <button type="button" class="btn btn-default" placeholder="{% trans "Select topics from ..." %}" ng-model="topic.selected_options" data-multiple="1" data-animation="am-flip-x" ng-options="option for option in topic.options" bs-select data-ng-disabled="0 == selection.length || 0 == group.options.length" all-none-buttons="true">
    {% trans "Select topic" %}<span class="caret"></span>
  </button>

Hope that helps 😉