ng-model not attaching to controller $scope when inserting modal form from Django

Question

I'm serving a form from Django into an angular-ui-bootstrap modal using the template property:

function openFinderModal() {
    var modalInstance = $modal.open({
        template: vm.modalTemplate,
    });

The relevant part of the modal template served from a form view:

<div class="modal-body" >
    <form ng-controller="ServiceFinderModalController">
        {% csrf_token %}
        {{ form }}
    </form>
</div>

I'm then using django-angular to create an ng-model on each form field (see the docs), corresponding to my simple form below:

class ServiceSelectionForm(NgModelFormMixin, NgForm):
    service_0 = forms.BooleanField()

However, when I attempt to access this form field from $scope I get undefined.

function ServiceFinderModalController($scope) {
    console.log($scope.service_0);
}

I've inspected the source of the page and it seems as though it should work (see second last line):

<form ng-controller="ServiceFinderModalController" class="ng-pristine ng-valid ng-scope">

  <input type="hidden" name="csrfmiddlewaretoken" value="dkH6aiHyIqqkJlN5xAbiYaX0c37tXb9U">
  <ul class="djng-form-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$pristine">
    <li ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$message" class="invalid ng-binding ng-hide" ng-bind="U2VydmljZVNlbGVjdGlvbkZvcm0.$message"></li>
  </ul>
  <ul class="djng-form-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.$dirty"></ul>
  <label for="id_service_0">Test 2</label>
  <ul class="djng-field-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$pristine">
    <li ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$message" class="invalid ng-binding ng-hide" ng-bind="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$message"></li>
  </ul>
  <ul class="djng-field-errors ng-hide" ng-show="U2VydmljZVNlbGVjdGlvbkZvcm0.service_0.$dirty"></ul>
  <input id="id_service_0" name="service_0" ng-model="service_0" type="checkbox" class="ng-pristine ng-untouched ng-valid ng-empty">

</form>

I've tried doing things like $scope.$digest() but get [$rootScope:inprog] errors.

UPDATE

The $scope becomes aware of this field once it has been toggled. Now I just need to figure out a way to do this from the get go...

ng-model not attaching to controller $scope when inserting modal form from Django

0 Answers0