AngularJS directives inside Bootstrap Modal not working - angularjs

Question

I am using AngularJS and Bootstrap in a single page application. I am displaying a form in a modal that has a
captcha image. Unfortunately, the form is not functioning. It appears that none of the ng- directives are
being followed. The code works fine when it is not in a modal. My stripped down code is as follows:
The Modal:
<div class = "modal fade" id = "contact" role ="dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4>Email</h4>
</div>
<div class = "modal-body">
<div ng-controller="formController">
<div class = "table-responsive">
<table class="table table-striped table-bordered">
<tr ng-repeat="x in emails">
<td>{{ x.email }}</td>
</tr>
</table>
</div>
<form ng-submit = "processForm()" class="form-horizontal" role="form">
<div class="form-group form-group-sm">
<label for="email">Email address:</label>
<input type="email" name = "email" class="form-control" id="email" placeholder = "Enter Email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
//display a captcha image with ability to refresh
<img class = "img-responsive" src="{{url}}" ng-click="refresh()">Refresh</img>
</form>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-primary" data-dismiss = "modal">close</a>
</div>
</div>
</div>
The controller:
myApp.controller('formController', function($scope,$http){
$scope.url = 'http://www.example.com/captcha/captcha.php?'+Math.random();
$scope.refresh = function() {
$scope.url = 'http://www.example.com/captcha/captcha.php?'+Math.random();
};
$scope.formData = {};
$scope.processForm = function()
{
$http({method: 'GET', url: 'http://www.example.com/emails.php?email='+$scope.formData.email}).success(function(response)
{$scope.emails = response;});
}
});

Answer 1

How do you pop your modal? Using jQuery? This will not work as the work take place out of Angular's computation loops. Try Angular-UI $modal service to pop your modal, it works perfect:
$http({
...
}).success(function(data){
$modal.open({
'templateUrl': '...',
'controller': ...,
'resolve': ...
})
})
Template URL can point not only to external resource, so do not be afraid of extra http calls. You can use it with on-page markup, just wrap it in <script type="text/ng-template">
UPD: to answer the question in your comment:
HTML:
<a data-ng-click="showPopup()">Show me!</a>
JS:
function Ctrl($scope, $modal){
$scope.showPopup = function(){
$modal.open({...});
}
}