Почему Angular е видит функцию?

<div class="modal_button">
			<p><button id="modal_button" ng-submit="addProduct()">Додати новий продукт</button></p> 
		</div>
		<div class="my_Add" id="my_Add" >
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<form action="">
				<div class="col-md-12">
					<br>Назва <br><input type="text" placeholder"Нвзва">
				</div>
				<div class="col-md-12">
					<br>Країна виробник <br><input type="text"  placeholder="Країна">
				</div>
				<div class="col-md-12">
					<br>Калорійність <br><input type="number" class="kalor"  placeholder="Калорійність">
				</div>
				<div class="col-md-12">
					<br>Ціна <br><input class="price" type="number" placeholder="Ціна">
				</div>
				<div class="col-md-12">
					<br>Термін зберігання <br><input type="number" class="number"  placeholder="Термін">
				</div>
				<div class="col-md-12">
					<br>Дата виготовлення<br><input type="date" class="datStw" ng- placeholder="Дата виготовлення">
				</div>
				<div class="col-md-12">
					<br>Опис <br>
					<textarea name="description" id="description" placeholder="Опис" cols="20" rows="8"></textarea>
				</div>
				<div class="col-md-12">
					<p><input type="button" value="Submit" onclick="save()"></p>
				</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div id="Products">
	
</div>

productApp.controller('AddtCtrl',['$scope','$http', '$location', function($scope, $http, $location) {
  $(document).ready(function(){
   $( "#modal_button" ).click(function() { // НЕ важно
      $( ".my_Add").css("display","block");// НЕ важно
      $( "table").hide(300);// НЕ важно
      $( ".modal_button button").css('display','none');// НЕ важно
    });// НЕ важно


  var a = document.getElementsByTagName("input");
  var mas=[];
    function save(){
      for (i=0;i<=3;i++){
          mas[i]=a[i].value; // Из инпутов в массив
        }
      for (i=0;i<=3;i++){
          a[i].value=mas[i]; // Обратно
          document.getElementById('Products').innerHTML += mas[i];
       }
      }
    });
}]);