Angularjs - Value Attribute on an Input Text Box Is Ignored When There Is a Ng-Model Used

AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

That's desired behavior, you should define the model in the controller, not in the view.

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

why does value attribute in html doesn't work when used with ng-model in angularjs?

That is the desired functionality - Angular way

<input type="text" ng-model="demo" value="Abc">

function Main($scope) {
  $scope.demo = 'Abc';
}

Another workaround is by using ng-init:

<input type="text" ng-model="demo" ng-init="demo='Abc'" value="Abc">

For reference : Input default value

ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

Looks like you have a typo at ng-model="user.lasttname"

<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form id="someForm" name="someForm">
    First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
    Last Name:  <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change blur'}" />
   <input id="getUser" type="button" ng-click="getUserName(user)" value="Get User" />
   <input id="getUser2" type="button" ng-click="getUserName(user)" value="Get User" />
   <button ng-click="resetForm(user)">RESET</button>
  </form>
</div>
<script>
$('#getUser').on('click', function(){
     var element = angular.element($('#someForm'));
     element.scope().user.lastname = $("#fname").val();  
});

</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {};

$scope.getUserName = function()
{
    console.log("User: "+ JSON.stringify($scope.user));
     alert("Last Name in Angular Controller: "+$scope.user.lastname)     

}
$scope.resetForm = function(user) {
      //Even when you use form = {} it does not work
//      angular.copy({},user);
    }
});

</script>

</body>
</html>

AngularJS - Value attribute on an select/dropdownlist is ignored when there is a ng-model used

I ended up using this Angular.JS directive :

https://github.com/glaucocustodio/angular-initial-value

You can find more informatino in that blog :

http://blog.glaucocustodio.com/2014/10/20/init-ng-model-from-form-fields-attributes/

Just in case the links dies you need to put this code before the declaration of your Angular application:

var initialValueModule = angular.module('initialValue', [])
.directive('initialValue', function() {
  return{
    restrict: 'A',
    controller: ['$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse){

      var getter, setter, val, tag;
      tag = $element[0].tagName.toLowerCase();

      val = $attrs.initialValue || $element.val();
      if(tag === 'input'){
        if($element.attr('type') === 'checkbox'){
          val = $element[0].checked ? true : undefined;
        } else if($element.attr('type') === 'radio'){
          val = ($element[0].checked || $element.attr('selected') !== undefined) ? $element.val() : undefined;
        } 
      }

      if($attrs.ngModel){
        getter = $parse($attrs.ngModel);
        setter = getter.assign;
        setter($scope, val);
      }
    }]
  };
});

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
  module.exports = initialValueModule;
}

Then you can do :

<script>
var app = angular.module('myApp', ['initialValue']); //Pass the directive to the app
</script>

<body ng-app="myApp">
  <!-- Add the "initial-value" directive to the html input -->
  <input type="text" value="John" name="text" initial-value ng-model="text" id="text"/>
</body>

AngularJs: Input value changes in display too using ng-model. I have tried ng-value and ng-bind too

The issue that you're facing is that when you call RecipeService.save($scope.shoppingItem);, the RecipeService is saving the reference to your scope variable.

So, instead of assigning the variable directly, I might try doing something like this:

RecipeService.save(angular.copy($scope.shoppingItem));

This will create a new copy of the object referenced by $scope.shoppingItem and will allow you to edit one of those objects without affecting the other.

Angularjs - Value Attribute on an Input Text Box Is Ignored When There Is a Ng-Model Used