<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="jquery@1.9.1" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script data-semver="0.2.12" src="https://rawgit.com/angular-ui/ui-router/0.2.12/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li ui-sref-active="active"><a ui-sref="hello">Hello page</a></li>
<li ui-sref-active="active"><a ui-sref="formselect">Form with select</a></li>
</ul>
<div ng-controller="MainCtrl as cntrlr">
<div ui-view="page"></div>
<script type="text/ng-template" id="formselect">
<div>
<div>Model lang_id is <span ng-bind="cntrlr.model.lang_id"></span></div>
<select ng-model="cntrlr.model.lang_id" ng-options="idx*1 as var.name for (idx, var) in cntrlr.languages">
</select>
<div>Pick a non-English value from the list and then switch to Hello page and back
- you'll see that although the model has correct lang_id value, the select list has reverted to English</div>
</div>
</script>
<script type="text/ng-template" id="hello">
<div>Hello, switch to the form select page, please</div>
</script>
</div>
</body>
</html>
var app = angular.module('plunker', ['ui.router']);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.languages = [{"id":2,"name":"English","code":"EN"},{"id":3,"name":"Russian","code":"RU"},{"id":4,"name":"Latvian","code":"LV"},{"id":5,"name":"Lithuanian","code":"LT"},{"id":6,"name":"Estonian","code":"EE"},{"id":7,"name":"German","code":"DE"},{"id":8,"name":"Polish","code":"PL"},{"id":9,"name":"Bulgarian","code":"BG"},{"id":10,"name":"Ukranian","code":"UA"}];
vm.model = {smth: "x", lang_id: 2};
});
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/hello");
$stateProvider.state('hello', {
url: "^/hello",
views: {
"page": {templateUrl: "hello"}
}
})
.state('formselect', {
url: "^/formselect",
views: {
"page": {templateUrl: "formselect"}
}
});
}]);
app.directive('toNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function(val) {
return '' + val;
});
}
}
})
/* Styles go here */