带ng-controller的下拉菜单本地和JSFiddle正常但Google Sites无法运行

问题根因 #

• 你引入的AngularJS脚本使用了http协议，而Google Sites、Github Pages等主流托管平台都强制使用HTTPS，HTTP资源会被浏览器判定为混合内容直接拦截，导致AngularJS框架根本没有加载，所有ng-指令不生效，{{}}插值表达式就会直接作为纯文本展示。
• 你使用的AngularJS 1.0.6版本过老，且采用了全局函数作为控制器的写法，部分平台严格的内容安全策略（CSP）会拦截全局函数调用，也会导致逻辑不生效。

修复方案 #

1. 把AngularJS的引入地址替换为HTTPS协议的地址
2. 调整代码为显式声明Angular模块的写法，兼容严格CSP限制

修改后可正常运行的完整代码 #

<html ng-app="langApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script>
    // 显式声明模块，避免全局函数被拦截
    angular.module('langApp', [])
    .controller('langCtrl', ['$scope', function($scope) {
      $scope.prop = {
        "type": "select",
        "name": "Language",
        "values": [{
          id: 1,
          'lang': "ENGLISH",
          'paragraph': "insert english here"
        }, {
          id: 2,
          'lang': "KOREAN",
          'paragraph': "insert korean here"
        }, {
          id: 3,
          'lang': "SPANISH",
          'paragraph': "insert spanish here"
        }]
      };
      $scope.selected = $scope.prop.values[0];
    }]);
  </script>
</head>
<body>
  <div ng-controller="langCtrl">
    <select ng-model="selected" ng-options="v.lang for v in prop.values">
    </select>
    <p>
    {{selected['paragraph']}}
    </p>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者aster