Angular failing in django block elements - angularjs

Question

I am trying to run angular validation inside my django template. It doesn't seem to work inside the block templatetag. But it seems to work outside it. Also, it don't throw an error in the console.
My code is:
{% extends 'base.html' %}
{% load staticfiles %}
{% block head_block %}
<title>Item Create</title>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope, $http) {
$scope.validLevel = 0;
$scope.setSelectValid = function()
{
$scope.validLevel = 1;
}
});
</script>
{% endblock %}
{% block body_block %}
<div style="padding-left: 10px;padding-right: 10px">
<form id="id_form" action=""
class="form-horizontal ng-dirty ng-valid-required ng-valid ng-valid-nx-equal ng-scope" method="post"
ng-app="myApp" ng-controller="validateCtrl" name="myForm"
novalidate>
{% csrf_token %}
{% verbatim %}
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_level" class="control-label">Level</label>
</div>
<div class="col-md-6 col-md-offset-3">
<select ng-change="setSelectValid()" class="form-control" id="id_level" name="level" ng-model="level">
<option ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" value="{{ x }}">Level {{ x }}</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_item" class="control-label">Item Name</label>
</div>
<div class="col-md-6 col-md-offset-3">
<input type="text" class="form-control" id="id_item" name="item"
placeholder="Enter Item Name"
ng-model="item" ng-minLength="2" required>
<span ng-cloak style="color:red "
ng-show="myForm.item.$touched && myForm.item.$invalid ">
<p ng-show="myForm.item.$error.required ">Item name is required.</p>
<p ng-show="myForm.item.$error.minlength ">Should be at least 2 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3">
<label for="id_description" class="control-label ">Description</label>
</div>
<div class="col-md-6 col-md-offset-3">
<textarea class="form-control" id="id_description" name="description"
placeholder="Enter item description"
ng-model="description" ng-minLength=5 rows="5"
required></textarea>
<span ng-cloak style="color:red "
ng-show="myForm.description.$touched && myForm.description.$invalid ">
<p ng-show="myForm.description.$error.required ">Item description is required.</p>
<p ng-show="myForm.description.$error.minlength ">Should be at least 2 characters.</p>
<p ng-show="myForm.description.$error.maxlength ">Should be at most 50 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3 ">
<label for="id_item_value" class="control-label ">Value</label>
</div>
<div class="col-md-6 col-md-offset-3 ">
<input type="number" class="form-control"
id="id_item_value" name="value" placeholder="Item value"
ng-model="value" min="1" required>
<span ng-cloak style="color:red "
ng-show="myForm.value.$touched && myForm.value.$invalid ">
<p ng-show="myForm.value.$error.required ">Please enter Item value.</p>
</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-offset-3 col-md-6 ">
<button type="submit" id="button-info" class="btn btn-primary"
ng-disabled="myForm.$invalid || !validLevel">Create Item
</button>
</div>
</div>
{% endverbatim %}
</form>
</div>
{% endblock %}

Answer 1

I just discovered that in case there are two or more angular apps in the page. I only need to add this line at the end.
angular.bootstrap(document, ['<app-name>']);