Show form in each block was created by ng-repeat? - angularjs

Question

I have the following HTML code:
<div class="row">
<div class="col-md" ng-repeat="song in songs">
<div class="title"><div class="add">+</div></div>
<div class="item"></div>
</div>
</div>
When I click over <div class="add">+</div> I need to show form here:
<div class="row">
// Show form here with submit button
<div class="col-md" ng-repeat="song in songs">...
When I submit form I need to add new item <div class="item"></div> in this columns where was opened form.
How to do this in AngularJS?
Can I insert form dinamicly or I must set form at once in ng-repeat?

Answer 1

angular.module('app',[])
.controller('ctrl',function($scope){
$scope.formView = false;
$scope.itemView = false;
$scope.plusShow = true;
$scope.songs =['sample']
$scope.showFrom = function(){
$scope.formView = true;
$scope.plusShow = false;
};
$scope.submit = function(){
$scope.formView = false;
$scope.itemView = true;
$scope.plusShow = false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="app" ng-controller="ctrl">
<form ng-if="formView">
<!-- from content -->
<input ng-click="submit()" type="submit" id="submit" value="Submit" />
</form>
<div class="item" ng-if="itemView">items</div>
<div class="col-md" ng-repeat="song in songs">
<div class="title">
<div class="add" ng-click="showFrom()" ng-if="plusShow">+</div>
</div>
</div>
</div>