AngularJS and Laravel Foreach - angularjs

Question

I do have a problem with using Angular with Laravel's foreach loop, i tried to be as detailed as possible :)
<div style="padding:15px;" id="table-scroll" ng-app>
<table class="table table-responsive tblProducts" id="tblProducts">
<thead>
<tr>
<th>Description</th>
<th>Prices</th>
<th></th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
//foreach loop here
</tbody>
</table>
</div>
this is my foreach loop
#foreach($products as $product)
{{ $product->product_description }}
product_price }}" ng-model="price">
#{{price*qty}}
#endforeach
Problem:
-When I use "ng-model" the prices/quantity are not displayed, but when i use "ng-bind" the prices/quantity are displayed but the subtotal column displays NaN (i have no idea why).
Flow:
-Each row of that table displays a list of grocery items, when the checkbox is clicked, it means that the item is selected and transferred to another table for calculating the grandtotal.
Reference:
https://ibb.co/hCddLv (snap from list of grocery items)
https://ibb.co/e0jk0v (when that product is transferred, this happens)
*im using "ng-bind" to display the price and quantity...
Thanks for the answer in advance guys...
I have updated this with my controller code in laravel
public function create()
{
$rooms = Room::where('status','=',0)->orderBy('room_length_of_stay')->get();
$products = DB::table('classifications')
->join('products', 'classifications.id', '=', 'products.classification_id')
->select('classifications.*', 'products.*')
->get();
//$scope.products = $products;
return View::make('frontdesk.transactions.create', ['rooms' => $rooms, 'products'=>$products]);
}

Answer 1

ng-model works by using a property on the scope to read/write a value as an input changes so you can't just assign it some value hence the problem. Ideally I only use Angular for the front end and template handling and would do the looping with an ng-repeat over an array that is retrieved in JS from the backend (could be laravel based but would keep it just serving JSON data not doing anything with the view, lumen is good for this). In the short term you can just set the value attribute on the input that would be the most direct way to put your data into the form that may not work with ng-model though (assuming you pointed that at some JS property) since it's expected the ng-model will be used for reading/writing the value.

Answer 2

Instead of using the foreach in blade use a ng-repeat directive. Get the data in the foreach in a json and iterate it in the template.
Before the render of the angular controller make a script:
<script>
var products = "{{ json_encode($products) }}";
</script>
Then in the controller store it as:
$scope.products = products;
Then iterate it:
<p ng-repeat="product in products">
#{{ product.product_description }}
#{{ product.price*product.qty}}
</p>