Take the 2-minute tour ×

i display some model entities with ng-repeat like and add a twitter bootstrap modal. The modal contains a form:

<div class="entity" ng-repeat="entity in model" ng-click="openModal()">
  <b>{{ model.title }}</b></br>
  <i>{{ model.content }}</i>
<!-- bootstrap modal ... -->
<div id="modal" ....

What is the best practise to open a bootstrap modal (which contain a form), and display the data of the entity in the form?

share|improve this question
You can use angular-ui.github.com/#directives-modal –  Valentyn Shybanov Jan 29 '13 at 11:59

1 Answer 1

up vote 0 down vote accepted

First of all, pay attention that you have a bug in the example (entity.title not model.title).

As for the modal, you can create a directive called modal-window and pass the entity to it.

You can pass the entity through the openModal(entity), and have the modal window bind a property to it.

Something like


$scope.entity = {};
$scope.showModal = false;

$scope.openModal = function( entity ){
  $scope.entity = entity;
  $scope.showModal = true;


<modal-window entity="entity"></modal-window>

share|improve this answer
Thanks for the fast answer. Do you mean like on that page: grobmeier.de/… . –  tschiela Jan 29 '13 at 11:48
Try this one... it'll save you: angular-ui.github.com/bootstrap/#/modal –  ShaiRez Jan 29 '13 at 20:35
@Valentyn - just saw you post it too... :) –  ShaiRez Jan 29 '13 at 20:36

Your Answer


