AngularJs - facing an issue when using ng-init

Question

I am facing an issue with using ng-init and assign it model inside my html.

The following code works fine. The following code is for Add/Edit functionality. For example, when row is is opened in Edit mode than it persist existing value and shows it in textbox .

<div>
    <div ng-if="title == 'Add Student'">
    <input type="text" name="name"placeholder="Student Name" data-ng-model="registration.Student.FirstName" maxlength="50">
    </div>

    <div ng-if="title == 'Edit Student'">
    <input type="text" name="name"placeholder="Student Name" data-ng-model="student.Student.FirstName" maxlength="50">
    </div>
</div>

However, the following code which is short version of above code does not work. I mean when the row is opened in edit mode it shows text field but does not show existing value (first name) in it. Why?

<div ng-init="model = (title == 'Add Student' ? registration.Student : student.Student)">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>

Please suggest whether ng-init can't be used in this way or some issue in my code?

thanks

Controller

var currentState = $state.current.name;
    if if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
}

Answer 1

You are ng-init block is wrong currently it is returning true or false , you are messing with brackets.

Markup

<div ng-init="model = (title == 'Add Student') ? registration.Student : student.Student">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>

Update

In your current case you ng-init is getting executed while element rendered on the DOM, at that instance on time registration.Student & student.Student doesn't have any value. Evaluation of ng-init setting null object to the model student. I'd suggest you do set model value from the controller logic that would be more safer.

Code

var currentState = $state.current.name;
    if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
    //shifted logic in controller
    $scope.model = (title == 'Add Student' ? registration.Student : student.Student);

}

Markup

<div>
    <input type="text" name="name" placeholder="Student Name" 
     data-ng-model="model.FirstName" maxlength="50"/>
</div>

Other way you could add one more flag like loadedData which will says that ajax response has been fetched & registration.Student & student.Student values are available in the scope.

Markup

<div ng-if="loadedData">
    <input type="text" name="name" placeholder="Student Name" data-ng-model="model.FirstName" maxlength="50">
</div>

Code

var currentState = $state.current.name;
    if (currentState == "Add")
    {
        $scope.registration = {
        Student: {
        FirstName: '',
    }
        var _init = function () {
    }
        $scope.title = " Add Student";
    }
    else
    {
        $scope.student= {};
        $scope.student= response[0];
        var _init = function () {
        $scope.title = " Edit Student";
    }
    //set flag
    $scope.loadedData = true;

}