<!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" to-number="">
          <option ng-repeat="lng in cntrlr.languages track by lng.id" value="{{lng.id}}">{{lng.name}}
          </option>
        </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 */