AngularJs - ajax 调用后 ng-options 未绑定

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="Ajax.Googleapis.com/Ajax/libs/AngularJS/1.8.2/angular.min.JS">https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.8.2/angular.min.JS</a>"></script>
</head>
<body ng-controller="MyController">
    <select ng-model="selectedOption" ng-options="item.id as item.name for item in options"></select>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyController', function ($scope, $http) {
            $scope.options = []; // 初始化空数组
            // 使用$watch监视options的变化
            $scope.$watch('options', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    // 数据发生变化时，手动更新ng-options
                    $scope.selectedOption = $scope.options[0].id; // 设置默认选项
                }
            });
            // 模拟Ajax调用获取数据
            $http.get('https://JSonplaceholder.typicode.com/todos')
                .then(function (response) {
                    // 数据成功获取后更新$scope.options
                    $scope.options = response.data;
                });
        });
    </script>
</body>
</html>