Why is my $scope not working? - angularjs

Question

I'm newbie in angularJS. I have finished phone-cat tutorial on the official angular document. I am trying to create some new feature for it such as ( create a new item , edit ... ) Assume that I created api for this.
app/phone-create/phone-create.module.js
angular.module('phoneCreate', ['core.phone'])
app/phone-create/phone-create.component.js
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
var data = {
name: $scope.name,
description: $scope.description,
kind: $scope.kind
}
self.create = function () {
console.log(data); // {name : underfined , desciprion : underfined , kind : underfined}
}
}
]
});
app/phone-create/phone-create.template.html
<div class="row">
<div class="form-horizontal col-md-8">
<div class="form-group">
<label class="control-label col-sm-4" for="name">Name</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="description">Description</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="kind">Kind</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>
When I click Create , I want to fields in input will be accessed by scope in controller but it is underfined. I don't know why and how to fix. Please help me!.

Answer 1

Let's take a look at these three lines:
<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
They have ng-models: $ctrl.name, $ctrl.description, $ctrl.kind. Your component doesn't declare those variables.
Change them to $ctrl.data.name, $ctrl.data.description, $ctrl.data.kind and modify your component:
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
self.data = {
name: "",
description: "",
kind: ""
};
self.create = function () {
console.log(self.data);
};
}
]
});

Answer 2

OPTION 1 :
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
self.create = function () {
console.log(self.name); // {name : underfined , desciprion : underfined , kind : underfined}
}
}
]
});
OPTION 2 :
angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;
// No need to initialise self.data
self.data = {
name: '',
description: '',
kind: ''
}
self.create = function () {
console.log(self.data);
console.log(self.data.name);
}
}
]
});
HTML :
<div class="row">
<div class="form-horizontal col-md-8">
<div class="form-group">
<label class="control-label col-sm-4" for="name">Name</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="description">Description</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.description" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="kind">Kind</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.data.kind" class="form-control" id="kind" placeholder="Kind">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>