AngularJS not working in Bootstrap modal. Why?

Question

JavaScript

Hello! In order not to waste your time in vain, I will get straight to the point.
I have 2 files:

• index.html - the main page of the site on which there is a "Login" button;
  
• authorization_modal.html is the file whose content fills the modal window.
  

In index.html itself, Angular works (the code is converted in the body of the document to 2). But when I click on the "Enter" button and a modal window appears, it does not transform into anything and is displayed like that - that is, Angular does not want to work in the modal window.
I want to say right away that the type code {% … %}and etc in the listing below are part of the markup of the Django web framework, and it works as it should.
Button code in index.html:

…
<a href="{% url 'profile:authorization' %}" class="btn btn-outline btn-lg inverse" data-toggle="modal" data-target="#login_modal">Вход</a>
<!-- Modal HTML -->
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "profile:authorization" url-->
        </div>
    </div>
</div>
…

Mobile window code authorization_modal.html:

{% load staticfiles extra_filters %}

<div class="modal-content">
    <div class="modal-body">

        <form method="POST" class="form-horizontal" ng-submit="submit()" ng-controller="AuthorizationController"> {% csrf_token %}
            {% for field in form %}
                <div class="form-group form-group-lg">
                    <label for="{{ field.id_for_label }}">{{ field.errors }}</label>
                    <input ng-model="{{ field.name }}" value="{% if field.value %}{{ field.value }}{% endif %}" type="{{ field|get_field_type }}"
                           class="form-control" name="{{ field.name }}" id="{{ field.id_for_label }}"
                           placeholder="{{ field.help_text }}" required>
                </div>
            {% endfor %}

            <div class="modal-footer text-center">
                
                <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
                <button type="submit" id="submit" class="btn btn-default">Вход</button>
            </div>
        </form>
    </div>
</div>

Angular code:

var app = angular.module('eworld_base_module', []);

app.config(function ($interpolateProvider) {
    // allow django templates and angular to co-exist
    $interpolateProvider.startSymbol('');
});

app.controller(
    "AuthorizationController",
    function ($scope, $http) {
        $scope.namee = "Mihail";


        $scope.submit = function () {

            alert($scope.email + " " + $scope.password);
                });
        };
    });

I tried to add the angular.min.js script connection directly to authorization_modal.html, but the console says an error that I am trying to connect the angular second time.
I tried to add ng-appit to authorization_modal.html but it didn't work either.
Maybe someone has an idea what I'm doing wrong?
Thank you very much in advance for your reply.

Answer 1

Use https://angular-ui.github.io/bootstrap/