Angular angucomplete-alt cannot populate the price - angularjs

Question

var app = angular.module('app', ["angucomplete-alt"]);
app.controller('MainController', function($scope) {
$scope.countries = [
{name: 'Hosting 1', code: '100.00'},
{name: 'Hosting 2', code: '200.00'},
{name: 'Hosting 3', code: '300.00'},
{name: 'Hosting 4', code: '400.00'},
{name: 'Hosting 5', code: '500.00'},
{name: 'Hosting 6', code: '600.00'},
];
$scope.countrySelected = function(selected) {
//$scope.invoice.item.lol = 1;
window.alert('You have selected ' + selected.title);
};
$scope.taxesData = {
singleSelect: null,
availableOptions: [
{id: '6.50', name: '6,5%'},
{id: '16.00', name: '16%'},
{id: '23.00', name: '23%'}
],
selectedOption: {id: '23.00', name: '23%'}
};
$scope.invoice = {
items: [{
description: '',
}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
description: '',
price: 10.99,
});
};
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
};
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.price;
})
return total;
};
$scope.taxtotal = function() {
var taxtotal = 0;
angular.forEach($scope.invoice.items, function(item) {
taxtotal += item.qty * item.price * item.taxesData.repeatSelect * 0.01;
})
return taxtotal;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!--ng-controller="MainController"-->
<div ng-app="app"><div ng-controller="MainController">
<table class="table table-condensed table-striped">
<tr>
<th>Product Name</th>
<th>Item Price</th>
<th>Qty</th>
<th>Tax Rate</th>
<th>Line Total</th>
<th>Line Taxes Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td angucomplete-alt id="ex1" placeholder="Search countries" maxlength="50" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight"></td>
<td><input type="text" value="{{selectedCountry.originalObject.code}}"></td>
<td><input type="text" ng:model="item.qty" ng:required class="input-mini"></td>
<!--<td><input type="text" ng:model="item.taxRate"class="input-small"></td>-->
<td>
<select name="repeatSelect" ng-model="item.taxesData.repeatSelect">
<option ng-repeat="option in taxesData.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</td>
<td>{{item.qty * item.mama | currency}}</td>
<td>{{item.qty * itme.mama * item.taxesData.repeatSelect * 0.01 | currency}}</td>
<td>
[<a href ng:click="removeItem($index)">X</a>]
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
<td></td>
<td>Totals:</td>
<td></td>
<td>{{total() | currency}}</td>
<td>{{taxtotal() | currency}}</td>
</tr>
</table>
</div>
</div></div>
As you can see in this jfiddle I am using angular with angucomplete-alt plugin to manage an order form.
I have a scope "countries" which feed the autocomplete box.
Now i am trying to ,
when choosing a country (product :P) i want the field Item Price to feeded with the correct value (e.g. if i select hosting 1, the Item price must completed with 100.00 value.
The problem is that :
1) If I set ng:model to this field (because I want to use the price for the totals) the field does not completed.
2) If I set just value="{{selectedCountry.originalObject.code}}, the field completed but I haven't a ng:object to use it for the totals.

Answer 1

It should be working if you set ng:model as the following, for your Price input field:
<input type="text" ng:model="selectedCountry.originalObject.code">
See working fiddle