How to properly edit/save Angular app's data?

Question

JavaScript

My first app in angular. I think it's not worth doing this (adding an array with data to the main app file), but still:
The question is, is it possible to edit "boardItems" (an array declared in advance in app.js ) ? So, what would the changes be displayed in the live preview, and the array itself would receive a new item?
app.js

(function() {
  
  var app = angular.module('done', [ ]);
  
  app.controller('BoardItemsController', function(){
    this.boardItems = [
      {
        'title': "Title",
        'body': "Body",
        'date': 'date'
      },
      {
        'title': "Title1",
        'body': "Body1",
        'date': 'date1'
      },
    ];
  });

  app.controller('AddFormController', function(){
    this.item = {};
    
    this.addItem = function(board) { // Сюда передается доска для добавления 
      board.boardItems.push( this.item ); // записываю в доску итем из формы 
    };
  });
})();

index.html

<!--	BoardItemsController-->
  <section class="reminders" ng-controller='BoardItemsController as board'> 
// Доска, в которую я кидаю итемы, ниже передаю ее в для добавления

    <button class="add-btn" id="add-btn">
        <span class="btn-cover" >
           <!-- removed svg -->
        </span>
    </button>
  
<!--	Single item -->
    <div class="item" ng-repeat='item in board.boardItems' >
    
      <div class="done">
         <button >
         	<!-- removed svg -->
         </button>
      </div>
      
      <div class="item-title" >
        {{ item.title }}
      </div>
      
      <div class="item-descrtiption">
        {{ item.body }}
      </div>
      
      <div class="item-time">
        {{ item.date }}
      </div>
 
    
    </div>
    
<!--		Form for Item addition -->
      <form action="" id="add-form" ng-controller="AddFormController as addForm" ng-submit="addForm.addItem(board)"> // Добавляю созданный итем из контроллера формы в доску итемов

        <label for="rem-topic">Topic:</label>
        <input type="text" name="rem-topic" ng-model="addForm.item.title">

        <label for="rem-body">Description:</label>
        <textarea name="rem-body" id="" ng-model="addForm.item.body"></textarea>

        <input type="submit" class="form-btn" value="Send">
      </form>
    
  </section>

The bottom line is that the item is read normally when alert() is called, both directly from the form and by the number of the array to which I want to add it. But it is not added to the page and it is not in the declared array either. "this.boardItems"
PS
If it's worth doing it via JSON - highlight it in your answer, please.

Answer 1

The controller is a layer between the interface and services.
Almost all data, business logic, etc. - should be in the appropriate services / factories / etc.
When you bring the code to the desired form, such questions will disappear.