Develop Reference

Why do dots in an Angular model name cause the controller not to be able to find it?

I'm so new to Angular that I don't understand this code.
app.controller('FileConfigController-detail',
function($scope, $http, $stateParams, FileConfigDetailsService) {
$scope.detail.inptITResourceID = "test me";
});
with this HTML:
<div class="form-group">
<label for="inptITResourceID">IT ResourceID</label>
<input class="form-control" id="inptITResourceID" type="text" ng-model="detail.inptITResourceID">
</div>
What I don't understand is why adding something with a DOT causes the code not to work?
Works fine with just one dot, but not .detail., that breaks it. Why?

You need to define details otherwise you'll get error from javascript that you can set value of undefined. you can use this code to define detail as object with inptITResourceID property:
app.controller('FileConfigController-detail',
function($scope, $http, $stateParams, FileConfigDetailsService) {
$scope.detail = {
inptITResourceID: "test me"
};
});

Keep getting "TypeError: Cannot read property 'value' of null" inside of $scope.$watch function

I'm trying to get a value from a container that, on a change in its value, triggers a $scope.$watch that starts another function. I can only get the error above, even though I can confirm that it is retrieving the correct value.
My suspicion is that $watch is loading before the color variable has a chance to initialize.
My AngularJS Script:
'use strict';
angular.module('careApp.tMain', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/tMain', {
templateUrl: './templates/tMain.html',
controller: 'tMainCtrl'
});
}])
.controller('tMainCtrl', function($scope, $http) {
$scope.dimmer = 100;
$scope.color = '#c24747';
$scope.$watch('color', function(){
console.log('Color has changed to ' + $scope.color);
hexToRGB($scope.color);
})
});
The $watch function watches over the following chunk of HTML code:
<div>
<!-- $watch looks for changes here-->
<ng-farbtastic ng-model="color"></ng-farbtastic>
<md-input-container class="hide">
<label>Color</label>
<!-- Curly brace 'color' variable from farbtastic.js code -->
<input type="text" value="{{color}}">
</md-input-container>
</div>
What do I need to do to correct this error?

First remove the readonly and value attribute from your html.
<md-input-container class="hide">
<label>Color</label>
<input type="text" ng-model='color'>
</md-input-container>
Now in your controller, the value of the $scope.color should have been updated automatically when there is a change in the ng-model from your page.
In case if you want to use the $watch functionality then, here it is.
$scope.$watch(function()
{
return $scope.color
},
function(newVal,oldVal){
if (oldVal!==newVal){
console.log('Color has changed to ' + newVal);
hexToRGB(newVal);
}
});

get ng-init value from scope

I want to get ng-init value from angular scope
controller
$scope.data={}
$scope.initvalue="myvalue";
Html
<input type="text" ng-model="data.value" ng-init="data.value= initvalue">
I want to set initvalue in input box and sent it to controller by ng-model(I want to able to modify this values so I need to make that)

Does this make sense?
http://jsfiddle.net/c7bsrenu/2/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data={}
$scope.initvalue="myvalue";
$scope.$watch('data.value', function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
});
}

You can try using using $watch. Please try this demo
eg :
<div ng-controller="yourController" >
<input type="text" id="demoInput" ng-model="demoInput" ng-init="demoInput='value'" />
</div>
code in controller
var yourController = function ($scope) {
console.log('demo');
$scope.$watch("demoInput", function(){
console.log($scope.demoInput);
},1000);
}

In html
<input type="text" ng-model="data.value" ng-init="setvalue()">
In controller
$scope.data ={}
$scope.initvalue="myvalue";
$scope.setvalue= function(){
$scope.data.value = $scope.initvalue;
}
This may help for you !

How to get ngModel of input in the controller?

Consider I have controller and input with ngModel .
I want to get this ngModel in the controller and execute $setViewValue on it .
The snippet is attach . The trying to execute - $setViewValue gives error -
TypeError: Cannot set property '$setViewValue' of undefined
var myAppModule = angular.module('myApp', []);
myAppModule.controller('myCtrl',function ($scope) {
$scope.entityMail.$setViewValue("blabla#aaa.com");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app="myApp">
<form ng-controller="myCtrl">
Mail <input type="text" ng-model="entityMail">
</form>
</div>
How to get this ngModel correctly and execute $setViewValue on it ?
Edit:
I edited my code . I must use it with $setViewValue.

var myAppModule = angular.module('myApp', []);
myAppModule.controller('myCtrl',function ($scope,$interval) {
$scope.entityMail = "blabla#aaa.com";
});

First you have to declared $scope.entityMail as a object, then only you can apply $setViewValue in this.
var myAppModule = angular.module('myApp', []);
myAppModule.controller('myCtrl',function ($scope) {
$scope.entityMail = {};
$scope.entityMail.$setViewValue("blabla#aaa.com");
});

Instead of $setViewValue you can directly assign the value to the ngModel
$scope.entityMail = "blabla#aaa.com";

Define default values in angularjs form, validation doesnt'work

I'm lost about define default values in my form : http://1ffa3ba638.url-de-test.ws/zombieReport/partials/popup.html
validation doesnt'work too...
/*********************************** SubmitCtrl ***********************************/
app.controller('SubmitCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
/* data pre-define : date & url for test */
$scope.myForm = {};
$scope.myForm.date = new Date();
$scope.myForm.url = "prout";
/* ng-show things */
$scope.successMailZR = false;
$scope.errorMailZR = false;
$scope.send = function() {
if ($scope.myForm.$valid) {
alert('ok');
}
};
}]);
What is the correct way for define default values ?
edit :
for url i do it like this :
<input type="text" class="form-control" name="url" placeholder="{{myForm.url}}" value="{{myForm.url}}" ng-model="myForm.url" readonly="readonly" />
it's not working

There is a conflict between a binding model $scope.myForm and the form name <form name="myForm".
Angular will assign the form's controller into the $scope as its name i.e. $scope.myForm and that override what you have initialized.
Change your form name or the binding variable to have a different name.

In HTML:
<input value="default">
Or using Angular's ng-model:
<div ng-controller="YourCtrl">
<input ng-model="value">
</div>
function YourCtrl($scope) {
$scope.value = 'default';
}