Angularjs input text value from json - angularjs

Question

I am trying to load json data on the form which has two text fields. TextFields display correct price and qty from json. But, the problem is when user updates the price and qty, updated price and qty are not reflecting in controller method - $scope.total(). Here is my code
HTML file
<div ng-repeat="row in myData">
<input type="text" ng-model="row.price">
<input type="text" ng-model="row.qty">
</div>
JS file
$http.get('http call’).success(function(data){
$scope. myData = data
})
$scope.row = {
price : 10.0,
qty : 2;
};
$scope.total = function() {
console.log($scope.row.price);
console.log($scope.row.qty);
}
JSON - [{"price":10.50,"qty":3}]
Not sure what I am missing here? why updated values are not reflecting in controller?

Answer 1

Your $scope.total function needs to be called somewhere, and as mentioned by #pankajparkar, $scope.row is different than the row in your directive (which belongs to the ng-repeat's scope only).
Do this:
<div ng-repeat="row in myData">
<input type="text" ng-model="row.price" ng-change="total()">
<input type="text" ng-model="row.qty" ng-change="total()">
</div>
JS:
$http.get('http call').success(function(data){
$scope.myData = data;
});
$scope.total = function() {
console.log($scope.myData[0].price * $scope.myData[0].qty);
};

Answer 2

As your data is an array you loop througt is to get the total of all your objects:
$scope.total = function() {
var sum = 0;
myData.forEach(function(obj){
sum += obj.qty * obj.price
});
return sum;
}
and you need to call this function when values change.
Fiddle
With only one element in your array, your function total should be like #Joao answer:
$scope.total = function() {
return $scope.myData[0].price * $scope.myData[0].qty;
};
Fiddle

Answer 3

First thing if response is only one item then it should not be an array
It should be Single JSON such as {"price":10.50,"qty":3}
HTML Code
<input type="text" ng-model="myData.price">
<input type="text" ng-model="myData.qty">
<button type="button" ng-click="updateTotal()">
JS CODE
$http.get('http call').success(function(data){
$scope.myData = data;
});
$scope.total = function(){
//now here you will get updated scope values
console.log($scope.myData.price * $scope.myData.qty);
}
Hope this will be help full to you.

Answer 4

$scope.total is a function, but it is not returning anything.
instead of:
var total = $scope.row.price * $scope.row.qty
try:
return $scope.row.price * $scope.row.qty