Send values/parameters to uibModal angular

Question

I have a page employee.html with a list of dependents and for each row (li) an inner button with the directive ng-click="editDependent({{dependent.id}})". That button tries to call a modal box.

The employee.html is loaded in a ui_view div from an index.html

I saw that each button in view source with chrome are correctly bound ng-click="editDepedent(1)" and so on.

But at the same time I have an error

angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/ $parse/syntax?p0=%7B&p1=invalid%20key&p2=11&p3=editDependent(%7B%7Bdependent.id%7D%7D)&p4=%7Bdependent.id%7D%7D)

I'm trying to pass my dependent id to my modal and the previous scope also that contains the info about the employee. So how can I achieve this parameter passing?

This is my main controller

    app.controller('EmployeeController', function ($scope, $stateParams, $uibModal, EmployeeService) {
        if($stateParams.id){
EmployeeService.getEmployee($stateParams.id).then(function(employee){
                $scope.employee = employee;
                EmployeeService.setCurrentEmployee(employee);
            }); 
        }

        $scope.editDependent = function(id){
            if(id){
                $scope.dependentid = id;
            }
            var uibModalInstance = $uibModal.open({
                templateUrl : 'modal_dependent.html',
                controller : 'DependentController',
                scope: $scope
            });
            return uibModalInstance;
        }
    });

This is my dependent controller to catch the value

app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){
    //Following line does not work because it gets the ID of employee which is passed by querystring
    //var dependentID = $stateParams.id;

    if($scope.dependentid){
        var currentEmployee = EmployeeService.getCurrentEmployee();
        //find the current dependent
        for(var i = 0; i < currentEmployee.dependents.length; i++){
            //*****************************************************
            //Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter
            if(currentEmployee.dependents[i].id == 1){
                $scope.dependent = currentEmployee.dependents[i];
                break;
            }
        }
    }else{
        $scope.dependent = { id : 0 };
    }
    $scope.editableDependent = angular.copy($scope.dependent);
    //Submit button in modal
    $scope.submitDependent = function(){
        DependentService.saveDependent($scope.editableDependent);
        $scope.dependent = angular.copy($scope.editableDependent);
        $uibModalInstance.close();
    }
});

UPDATE

employee.html

<form name="employee_form">
    <div>
        <h1> {{employee.name}} </h1>
        <h3>Dependents</h3>
        <button class="btn bgcolor-rb-main" x-ng-click="editDependent(0)">
            Add new
        </button>
        <ul class="list-inline">
            <li x-ng-repeat="dependent in employee.dependents">
                <button x-ng-click="editDependent({{dependent.id}})">
                    Edit
                </button><br>
                <div>{{dependent.name}}</div>
            </li>
        </ul>
    </div>
</form>

This is my modal_dependent.html

<div class="modal-header">
    <h4>Dependent</h4>
</div>
<div class="modal-body">
    <div class="form-group">
        <input type="text" id="txtName" x-ng-model="editableDependent.name" />
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" x-ng-click="discardChanges()">Discard</button>
    <button type="submit" class="btn btn-primary" x-ng-click="submitDependent()">Save</button>
</div>

UPDATE

I changed my controller to initialize before $scope.dependent

app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){
    //Following line does not work because it gets the ID of employee which is passed by querystring
    //var dependentID = $stateParams.id;

    $scope.dependent = { id : 0 };

    if($scope.dependentid){
        var currentEmployee = EmployeeService.getCurrentEmployee();
        //find the current dependent
        for(var i = 0; i < currentEmployee.dependents.length; i++){
            //*****************************************************
            //Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter
            if(currentEmployee.dependents[i].id == 1){
                $scope.dependent = currentEmployee.dependents[i];
                break;
            }
        }
    }
    $scope.editableDependent = angular.copy($scope.dependent);
    //Submit button in modal
    $scope.submitDependent = function(){
        DependentService.saveDependent($scope.editableDependent);
        $scope.dependent = angular.copy($scope.editableDependent);
        $uibModalInstance.close();
    }
});

SOLVED

My button changed from this

<button x-ng-click="editDependent({{dependent.id}})">Edit</button>

To this

<button x-ng-click="editDependent(dependent.id)">Edit</button>

Answer 1

i think there is parsing error you have to define

$scope.dependentid = {};

before using it, or otherwise you can use it as a model (if you are submitting a form on frontend like this)

<input type="hidden" ng-model="dependentid" />

it will be better to understand for me if you edit the code and add some frontend html