I'm stuck with my foreach here. I have a page where a user can create a candidate and add work experience to it, and dynamically add fields using angularjs to fill the work exprience (exp[]) array:

(add candidate blade view)

 <div class="form-group row">
                    <div data-ng-repeat="row in rows">
                        <div id="expDiv"
                             class="col-md-12 form-group row {{$errors->has('exp') ? ' has-danger' : '' }}">
                            <div class="col-sm-3">
                                <input type="text" name="exp[@{{ $index }}][title]" id="exp" placeholder="Title"
                                       class="form-control {{ $errors->has('exp[][title]') ? ' form-control-danger' : '' }}"
                                       value="{{old('exp[][title]')}}">
                            </div>
                            <div class="col-sm-5">
                                <input type="text" name="exp[@{{ $index }}][desc]" id="exp" placeholder="Description"
                                       class="form-control {{ $errors->has('exp[][desc]') ? ' form-control-danger' : '' }}"
                                       value="{{old('exp[][desc]')}}">
                            </div>
                            <div class="col-sm-3">
                                <input type="text" name="exp[@{{ $index }}][date]" id="exp" placeholder="Date"
                                       class="form-control {{ $errors->has('exp[][date]') ? ' form-control-danger' : '' }}"
                                       value="{{old('exp[][date]')}}">
                            </div>
                            <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeRow($index)">
                                <i class="fa fa-remove"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <a class="btn btn-block btn-outline b-info text-info" data-ng-click="cloneRow()">
                    <i class="fa fa-plus pull-right"></i>
                    Add another entry
                </a>

what the angular part does is limit the number of fields to 10 and make a new row everytime the button is clicked, it also lets the user remove added fields. (controller.js)

app.controller('candidateController', function ($scope, $http) {
$scope.rows = [0];
var counter = 0;

$scope.cloneRow = function () {
    counter++;

    if ($scope.rows.length == 10)
        alert('Entry limit reached!');
    else
        $scope.rows.push(counter);
};

$scope.removeRow = function (rowIndex) {
    $scope.rows.splice(rowIndex, 1);
}
});

after that the user can go to the candidate edit page, which gets loaded with php:

public function edit(Candidate $candidate) {
    $branch = Branches::where('name', $candidate->branch)->first();
    $categories = $branch->categories()->get();

    $assigned = [];
    foreach ($candidate->skills as $skill)
        $assigned[] = $skill->id;

    return view('candidates.edit', compact('candidate', 'assigned', 'categories'));
}

where the experiences relation (one to many) added to the candidate gets loaded into an blade foreach:

<div class="form-group row">
                        @foreach($candidate->experience as $exp)
                                <div id="expDiv"
                                     class="expDiv col-md-12 form-group row {{$errors->has('exp') ? ' has-danger' : '' }}">
                                    <div class="col-sm-3">
                                        <input type="text" name="exp[][title]" id="exp" placeholder="Title"
                                               class="form-control {{ $errors->has('exp[][title]') ? ' form-control-danger' : '' }}"
                                               value="{{$exp->title}}">
                                    </div>
                                    <div class="col-sm-5">
                                        <input type="text" name="exp[][description]" id="exp" placeholder="Description"
                                               class="form-control {{ $errors->has('exp[][description]') ? ' form-control-danger' : '' }}"
                                               value="{{$exp->description}}">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="text" name="exp[][date]" id="exp" placeholder="Date"
                                               class="form-control {{ $errors->has('exp[][date]') ? ' form-control-danger' : '' }}"
                                               value="{{$exp->date}}">
                                    </div>
                                </div>
                        @endforeach
                    </div>

but I don't know for the life of me how to use my angular script with the loaded data, I can't ofcourse just put in the ng-repeat because it would just clone the 3 already existing fields. How do I approach this? I hope it's not too confusing....

Thanks.