Ui bootstrap doesn’t show after adding object to controller

So my ui bootstrap model window is working correctly but when I add an object to the controller it stops showing and it doesn’t give me any error in consol.

When my controller looks like this:

"use strict";

app.controller('RegisterModalCtrl', ['$scope', '$location', '$uibModalInstance', '$http', 'ngAuthSettings', 'registerService',
function($scope, $location, $uibModalInstance, $http, ngAuthSettings, registerService) {

var $ctrl = this;

$ctrl.cancel = function() {
    $uibModalInstance.dismiss('cancel');
};
/*
$ctrl.registerInfo = {
    email: $ctrl.registerData.email,
    nick: $ctrl.registerData.nick,
    password: $ctrl.registerData.password,
    password_confirmation: $ctrl.registerData.confirm_password
};
*/

$ctrl.registerSubmit = function(registerInfo) {
    console.log('im in registerSubmit controller function');

    registerService.registerUser(registerInfo);
    $uibModalInstance.dismiss('cancel');
};

$ctrl.showCookiesRules = function() {
    $location.url("/cookiesrules");
    $uibModalInstance.dismiss('cancel');
};

$ctrl.showRules = function() {
    $location.url("/rules");
    $uibModalInstance.dismiss('cancel');
};
}]);

Everything works just fine but when i delete /* just before registerInfo object it stops showing. What is wrong with this object? I want it to create this object to pass it in function and then pass it to function in service.

Answer

So what you should do is initiate $ctrl.registerInfo:

$ctrl.registerInfo = {};

The data doesn’t exist when the controller runs, so you are trying to set the properties of $ctrl.registerInfo without non-existent data. Once your form is filled out, the properties/data will be set.

An alternative option would not be to initialize at all, and simply set your form model to registerData.confirm_password, and when you call registerSubmit, call it with registerSubmit(registerData). That will send the data to that method without having to initialize in the controller:

<input type="text" placeholder="powtórz hasło"
        ng-model="registerData.confirm_password" />

<!-- abbreviated (other form fields here -->

<input type="submit" ng-click="registerSubmit(registerData)" />

If you need the data afterwards, in registerSubmit, add a line:

$ctrl.registerInfo = registerInfo;

However, I am not sure you’d want to hang onto the password there.

AngularJS Form Docs: https://docs.angularjs.org/guide/forms