Getting the value inside a textbox ng-model using javascript .value

I'm currently confuse in trying to obtain the value inside a text box using jquery .value

<input disabled="true" ng-model="account.referral_code_string">

I tried using document.getElementById('input-refcode').value to try to obtain the value but it comes out as empty on my console.

But if I tried binding it onto a on-click event, it manages to obtain the value stored inside the ng-model

$('.trigger').on('click', function(){ console.log(document.getElementbyId('input-refcode'))
});

As you can see there is a value inside the text box itself. But when you tried inspecting it, this is what came out.

<input disabled="true" ng-model="account.referral_code_string">

If you look at there is no value inside the input textbox. I'm not sure if it has something to do with angular.js

3 Answers

You can get the scope object using element

var scope = angular.element(document.getElementById('input-refcode')).scope();
var desiredValue = scope.account.referral_code_string;

This might help you.

inject $timeout service in controller

$timeout(function(){ console.log(document.getElementById('input-refcode')); },200);

Note: Use capital B in getElementById not getElementbyId.

var app = angular.module('todoApp', []);
app.controller('TodoListController', function($scope){ $scope.$watch('referral_code_string'), function(){ console.log($scope.referral_code_string)}; console.log(document.getElementById('input-refcode').value);
});

<script src=""></script>
<script src=""></script>
<div ng-app="todoApp" ng-controller="TodoListController as todoList">
<input disabled="true" ng-model="referral_code_string" ng-init="referral_code_string = 'abc'" value="abc">
</div>