Angularjs 数据绑定到注入的共享模型

我试图独自学习Angular，并想学习工厂方法。我定义了一个应用程序，我认为这是一个工厂：

var app = angular.module("MyPlayground", []);

app.factory('sharedModel', [

function() {
  var sharedModel = {
    config: {
      name: "My Playground",
      number: 123
    }
  };
  return sharedModel;
}
]);

然后我定义了一个控制器，如下所示：

  var MainController = function($scope, sharedModel) {
    console.log(sharedModel);
    $scope = sharedModel;
    console.log($scope);
    console.log($scope.config);
    console.log($scope.config.name);
  }
  MainController.$inject = ['$scope', 'sharedModel'];

  app.controller('MainController', MainController);

当我运行它时，我可以在控制台中看到我的对象，它有一个名为config的属性，里面是指定的名称和编号

然后，在我的HTML中，我想调用名称，因此我尝试以下方法：

{{config.name}}

但我只能看到一个空白屏幕。控制台中没有错误，而且由于console.log的大量使用，我可以在控制台中看到我的值OK为$scope.config.name

我甚至尝试过，但得到了“Error:[ng:areq]参数'MainController'不是函数，未定义”，所以可能没有那么简单

---

如果这有助于理解我的意思，我一直在做这件事。如果您能深入了解这一点，我将不胜感激。我只是想了解一下这一切。

我认为覆盖$scope不是一个好主意。为什么不把事情简单化

  var MainController = function($scope, sharedModel) {
    console.log(sharedModel);
    $scope.sharedModel = sharedModel; 
    $scope.config =  sharedModel.config;
  }

---

啊，我想我现在开始明白了。非常感谢。从html部分访问的变量应该在$scope中。其思想是html部分不需要$scope的显式声明。但是，在编写js代码时，必须使用它。