Clone row of elements in AngularJS - angularjs

Question

I have this Angular form http://plnkr.co/edit/?p=streamer&s=ph0QHW513czywawl.
I need to clone the row on clicking ADD (+) and delete selected row on clicking DELETE (-).
Looking for a solution in AngularJS only. In current solution, the scopes are not working correctly. Also did not yet figure out how to implement (-) functionality.
index.html
<div ng-controller="MyCtrl" style="padding: 10px;">
<br/>
<div style="width: 90%; display: inline-block; border: 1px silver solid;">
<div class="row">
<div class="col-xs-3">
<select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level">
<option value="Native" ng-selected="true">Native</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remark">
</div>
<div class="col-xs-2">
</div>
</div>
<div select-last ng-repeat='item in items'></div>
</div>
<a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'>
<i class="glyphicon glyphicon-plus"></i>
</a>
{{hr.langauge | json}}
language.html
<div class="row" style="padding-top: 5px;">
<div class="col-xs-3">
<select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level">
<option value="">Level</option>
<option value="proficient">Proficient</option>
<option value="intermediate">Intermediate</option>
<option value="beginner">Beginner</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remarks">
</div>
<div class="col-xs-2">
<a class="btn" href="#" tooltip="Delete" ng-click="deleteRow({{$index}});">
<i class="glyphicon glyphicon-minus"></i>
</a>{{$index}}
</div>
</div>
script.js
var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
return {
restrict: 'A',
templateUrl: 'language.html'
}
});
function MyCtrl($scope) {
$scope.items = [];
$scope.newitem = '';
$scope.addRow = function(){
$scope.items.push($scope.newitem);
console.log('+ clicked');
}
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
console.log('- clicked in row ' + rowNo);
}
}

Answer 1

Based on your comment and plunker, it looks like you have the Add figured out. The remove row is easier. All you need to do is splice out the row. The issue on your view is you have the index surrounded by {{}} which isn't necessary.
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
$scope.languages.splice(rowNo, 1);
console.log('- clicked in row ' + rowNo);
};
<a class="btn" href="#" tooltip="Delete" ng-click="deleteRow($index);">
<i class="glyphicon glyphicon-minus"></i>
</a>{{$index}}
Here is an updated plunker: http://plnkr.co/edit/7vW24aDyZH02LO1iO7F3?p=preview&s=ph0QHW513czywawl

Answer 2

functionality is to have a click edit a row entry, create a temporary copy of the row data, then update.
Below link
https://thinkster.io/egghead/angular-copy/