We Keep Coding

How to prefill a textbox with a value using ng-model

I have this as HTML:
<div class="row" ng-app="">
<form>
<input type="text" ng-model="link" name="link"
class="form-control" id="yesklinkshjhs3"
value="hello" placeholder='Link for your post.'>
</form>
<small></small>
</div>
I have created this HTML just to show the problem so there may be some mistakes but the main issue is that the textbox cant is prefilled with any value if I use the ng-model there.
If I remove the ng-model the value is there. I need the form to be prefilled to facility the editing of a post, how should I do that ??
I have tried removing the ng-model it works then but I need the ng-model there to show the realtime change in the next box.
I am new to the angular.
Here is a fiddle
http://jsfiddle.net/iamrahulkumar001/wksapfr2/
The textbox does not have any prefilled value ...

There's a few things with your JSFiddle that need to be fixed. First, you'll need to use the ng-app directive to bootstrap your application. Second, you should be registering MyCtrl as a controller. Third, you can set a default value for inputValue in your MyCtrl controller. Below is a working example demonstrating these three items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.inputValue = 'sjks';
$scope.$watch('inputValue', function(thisValue) {
$scope.inputValueEcho = thisValue;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
<p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
<p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>

Accessing $dirty property of component that does not include a <form> element

I have a component in my AngularJS 1.6 app that dynamically generates checkboxes using ng-repeat, like this:
<div ng-repeat="subItem in item.ChildItemTypes">
<md-checkbox class="md-primary" ng-model="subItem.checked">{{ subItem.Description }}</md-checkbox>
</div>
This component does not contain a <form> element because it is designed to be placed within a form.
How can I get access to the $dirty property of these checkboxes within the component's controller, since I don't have a reference to the form?

You may use the ng-form angular directive to group anything, even outside a html form. Then, you can take advantage from angular FormController. Example:
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>

AngularJS: Can I make div/span elements change form's ng-valid status?

I have a form. Inside that form, I have a dropdown that adds items to an array in the model. Inside the ng-repeat for that array, there is a list of requirements that the model needs before it can be considered valid, which is displayed in <span> elements. That list is checked with a function that is run by ng-class in order to display the requirement as green or red depending on whether the requirement has been met. I need the form to be considered invalid when any of these items are red. I have tried returning ng-invalid in the class of the <span> element along with the class that sets the color, but the form ignores this. What can I do to make this work?

You can access the validation variables directly on you controller. So you can do a function to verify any modifications and set the form validity as you want.
Some code example:
The form should be invalid if the input is empty, but this can be override by the checkbox value.
angular.module('app', [])
.controller('ctrl', ctrl);
function ctrl($scope) {
$scope.chkChange = function(value) {
$scope.form.$valid = value;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<form name="form">
<input name="input" ng-model="userType" required>
<input type="checkbox" ng-model="chkbox" ng-change="chkChange(chkbox)">
</form>
<p>Form valid {{form.$valid}}</p>
</div>

AngularJs Error: [ngModel:nonassign]

I have started to learn AngularJS and this is what amazes me, at the beginning even a four lines of code does not work properly and I have no clue
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div data-ng-app="">
<input type="text" ng-model="name='Rocky'">
Your name is {{name}}
</div>
On typing something in the textbox, my expression does not change.
It shows the below error in the console.
TypeError: r is not a function

You can't initialize to Rocky inside ng-model. Try this:
<div data-ng-app="">
<input type="text" ng-model="name" ng-init="name='Rocky'">
Your name is {{name}}
</div>

Docs
This error occurs when expression the ngModel directive is bound to is a non-assignable expression.
You need to initialize using ngInit directive. You cannot initialize using ngModel
The ngInit directive allows you to evaluate an expression in the current scope.
<input type="text" ng-init="name='Abhinav'" ng-model="name" />
DEMO

Using ng-value instead of ng-model worked for me.

The submit button not working AngularJS

So basically wwhat I'm trying to do is take input of two numbers n1 and n2 and then print their sum all using angular. I have used bootstrap for styling. But i noticed nothing was happening so to check i added alert() function in the function to be called but still it's not getting accessed somehow. I dont know jQuery.
PS: when I use text1+text2 it's concatinating the string instead of printing the sum
This is my html:
<!DOCTYPE html>
<html ng-app="store">
<head >
<title>Trying Angular</title>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-controller="formCtrl as formCtrl" ng-submit="formCtrl.submit()">
<div class="form-group">
<label>Enter n1</label>
<input type="text" class="form-control" placeholder="enter the first number" ng-model="text1">
<p>{{ text1}}</p>
</div>
<div class="form-group">
<label>Enter n2</label>
<input type="text" class="form-control" placeholder="enter the second number" ng-model="text2">
<p >{{text2}}</p>
</div>
<div class="form-group" style="display:block; margin:10px auto; margin-left:370px;">
<input type="submit" class="form-control" >
</div>
<p> Your SUM of two numbers is ={{text1+text2}}</p>
</form>
<script src="angular.min.js"></script>
<script src="exp1.js"></script>
<script src="jquery.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
This is my angular code:
(function(){
var app=angular.module('store',[]);
var n1=0;
var n2=0;
app.controller('formCtrl',function(){
this.submit=function(){alert("successful");}; // <----- alert()
});
})();

As explained in the documentation for the ngController directive, there are two ways to access the members of a controller:
Use the as <scopeProperty> syntax, and access it using the <scopeProperty> name:
<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
controller="formCtrl as fc" ng-submit="fc.submit()">
Here, fc is being declared as the name for the controller instance, and its properties are accessed with fc.
Example
Inject $scope into the controller and add properties to that:
app.controller('formCtrl', ['$scope', function($scope){
$scope.submit = function(){alert("successful");};
}]);
<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
controller="formCtrl" ng-submit="submit()">
Here, the controller's properties are added to the $scope and this allows us to access them directly in the HTML without using the dot notation.
Example
The page linked to above compares and contrasts the two approaches. You were not exactly using either, and that's why you were having trouble.

It would be better to add your submit code inside a function:
app.controller('formCtrl',[$scope, function('$scope'){
$scope.submit = function() {
alert('submit');
};
}]);
then in your ng-submit directive use submit() as per documentation you can also use ng-change and ng-click directives to update the models then do whatever with the models.
Further to the comments about accessing the data from the inputs:
When you add the ng-model attribute to an input you are saying I would like data from this input to be stored in ng-models name. Adding this to an input: ng-model="inputvalue.input1" would enable you to store data kind of like the following:
inputvalue = {
input1 : "Input value would go here"
}
note the names are the same for a reason.
You can then set up those objects to be stored/accessed inside the controller using $scope look at the docs on AngularJS website - take your time and get to know what's going on.