javascript - Why does my select ng-model not reflect my selected ng-option? -

i'm trying code provide value in select ng-options:

<select ng-model="selectedmovieid" ng-if="movies.length>0" ng-options="movie.id movie.title movie in movies track movie.id"></select>   <div>     {{selectedmovieid||'no movie selected'}}   </div> 

but never see value selectedmovieid. i've tried adding dot ng model (something foo.selectedmovieid) keep getting errors.

having read 3-4 questions on feel has simple i'm missing.

here's full code:

var app = angular.module("movieapp", []);  app.controller("moviectrl", ["$scope", "$http", function($scope, $http) {   $scope.apikey = ''   var baseurl = 'https://api.themoviedb.org/3/'   $scope.movies = []   $scope.searchmovie = function() {     var url = baseurl + 'search/movie?api_key=' + $scope.apikey + '&query=' + $scope.querystring;     $http.get(url)       .then(function(response) {         $scope.movies = response.data.results;       }, function() {         console.log("some error");       })   }   $scope.getcredits = function() {     var url = baseurl + 'movie/' + $scope.selectedmovieid + '/credits?api_key=' + $scope.apikey     console.log(url)     console.log($scope.movies)       /*$http.get(url)           .then(function(response) {               console.log(response.data)               $scope.actors = response.data.results;           }, function() {               console.log("some error");           })*/   } }]); 

and html:

<div ng-app="movieapp" ng-controller="moviectrl">   <input type='text' ng-model='querystring' ng-submit="searchmovie()">   <button ng-click="searchmovie()">     search   </button>   <hr/>   <select ng-model="selectedmovieid" ng-if="movies.length>0" ng-options="movie.id movie.title movie in movies track movie.id">   </select>   <div>     {{selectedmovieid||'no movie selected'}}   </div>   <button ng-if="movies.length>0" ng-click="getcredits()">     credits   </button> </div> 

and jsfiddle i've been working in. why won't ng-model update?

demo doesn't work without data provided suspect problem breaking golden rule of using object in ng-model

ng-if creates child scope , child scopes break 2 way bindings on primitives doing

set object in controller inheritance work subsequent child scopes , in view bind ng-model object