How to insert new elements in AngularJS

Question

I'm very new in Angular but I start to make a task and I'm looking for help in design.

I need that on every select update new one blue box will be added on the page.

index.html

        <div class="col-md-3 col-md-offset-9" ng-controller="selectController">
          <select class="form-control"
          ng-model="selectedItem"
          ng-options="item.Title for item in items"
          ng-change="clickOnOption()">
            <option label="" value="">Nothing selected</option>
          </select>
        </div>
        <div class=" col-md-12 boxes-container"></div>

app.js

// MODULE
var creatorApp = angular.module('creatorApp', []);

// CONTROLLERS
creatorApp.controller('selectController', ['$scope', function ($scope) {
    $scope.items = [
       {ID: '1', Title: 'Plan 1'},
       {ID: '2', Title: 'Plan 2'},
       {ID: '3', Title: 'Plan 3'},
       {ID: '4', Title: 'Plan 4'},
    ];

    $scope.selectedItem = '';

    $scope.clickOnOption = function(){
        console.log($scope.selectedItem.Title);
        //old noble jquery
        $('.boxes-container').append('<div class="col-md-3" style="height: 30em; background-color:#0000FF;"></div><div class="col-md-1"></div>');

    };

}]);

So I feel like something wrong in my code, I started use jquery again and it looks like I need to use directive or something like that. But how I can understand I should use directive in my case.

Sorry for my noob question. But I'm really confused with directives in Angular.

update Sorry, but I didn't see something new for me in a related topic. From the topic: If you don't know, ask!