How to make block repeat after button click in Angular?

Question

JavaScript

I have a certain data block in the form that should be repeated after clicking on the button

One more block

What is the best way to do this (the problem is that the values ​​of Angular expressions are NOT written using jqery), and I feel that this can be done gracefully using Angular

<div class="panel panel-default" >
            <div class="panel-heading"><b> Пример : {{applianceName }}</b></div>
            <div class="panel-body">
              <div class="form-group">
                <label> Пример:</label>
                <select class="form-control" required ng-model="applianceName" >
                  <option ng-repeat="applic in appliance" required>{{ applic.name }}</option>
                </select>
              </div>

              <div class="form-group">
                <label> Пример:</label>
                <select class="form-control" required>
                  <option ng-repeat="behavior in behavior" required>{{behavior.name}}</option>
                </select>
              </div>   
            </div>
          </div>
    <div class="form-group">
      <button type="button"
              class="btn btn-primary btn-lg btn-block"">
        <span class="glyphicon glyphicon-plus"></span>
        Еще один блок
      </button>

Answer 1

Yes, and I feel that this can be done gracefully using Angular

First, let's get into the ideas of declarative markup. All those ng-repeat, ng-hide, etc. do not perform any actions, but simply react to state changes, and you describe with these things how it should react.
Now to our task. We have some kind of array that was set in the controller (I also ask you to get rid of $scope in controllers and switch to controllerAs syntax). In order for the UI to react to state changes, we need to change this state. That is, on click, pull the controller method, which will add an element to the array. And that's all.