updating angular model with bootstrap carousel - angularjs

Question

i'm working on an angular web app and i'm stuck in a part of it.i'm trying to update an angular model by choosing an item in a bootstrap carousel.i mean that if i select an image from the bootstrap carousel, the image's link will be put in the form used to update the model.is it possible to do it?this is the code i'm trying to make working
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Interaction_Ctrl">
<form>
<table>
<tr>
<td>Image URL:</td>
<td>
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" ng-change='change()' class="form-control" />
</td>
</tr>
<tr>
<td>
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image" ng-change='change()'>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
</td>
</tr>
</table>
</form>
</div>
var mymodule = angular.module("jsonerator", ['ui.bootstrap']);
mymodule.controller("Interaction_Ctrl", function ($scope) {
$scope.slides = [];
$scope.slides.push({
text: 'barnowl',
image: 'http://reelyactive.com/images/barnowl.jpg'
});
$scope.slides.push({
text: 'barnacles',
image: 'http://reelyactive.com/images/barnacles.jpg'
});
$scope.slides.push({
text: 'barterer',
image: 'http://reelyactive.com/images/barterer.jpg'
});
$scope.slides.push({
text: 'chickadee',
image: 'http://reelyactive.com/images/chickadee.jpg'
});
$scope.slides.push({
text: 'starling',
image: 'http://reelyactive.com/images/starling.jpg'
});
function changeKeyValue() {
for(var key in $scope.person) {
if($scope.person.hasOwnProperty(key)) {
if(!$scope.person[key].length) {
delete $scope.person_ld["#graph"][0]["schema:" + key];
}
else {
$scope.person_ld["#graph"][0]["schema:" + key] = $scope.person[key];
}
}
}
}
$scope.change = function() {
changeKeyValue();
}
});
});

Answer 1

If you place the input url element somewhere within the ng-repeat, the input will update as the slides change. Right now the issue is the scope {{slide.image}} is within each <scope> element, so the input does cannot utilize the model attribute.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image">
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" class="form-control" />
<br>
<br>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
You can adjust CSS or add additional <br/> to separate as needed. Plunker below. Let me know if that helps.
http://plnkr.co/edit/Kd23U1ercuqc2ACpQEZH?p=preview