Why does Angular not see the function?

Question

JavaScript

Hello, please help me understand.
There is such code on the add.html page

<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>

And there is a controller for this page:

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];
       }
      }
    });
}]);

Why is it written that the save function was not found when adding by clicking on the Submit button?

Answer 1

var a = document.getElementsByTagName("input");
var mas=[];

What heresy? Have you even read the Angular documentation? There is also ngModel. .
And this?

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];
       }

It's impossible to google how to walk through the array in Angular
Why do you use the ngSubmit directive, and then also hang an event on the button with value = submit ??? And for such events there is a special ngClick
https://angularjs.org/ I will not zazdru to whomever you send this code to. Vzagali...

Answer 2

It needs to be added to $scope

Answer 3

function save(){
change to
$scope.save = function() {