$scope is not defined in a directive controller - angularjs

Question

I have a very basic demo app. The HTML:
<div ng-app="MyApp" ng-controller="Shapes">
<shapes></shapes>
</div>
and my js file:
app.directive('shape',
function () {
var directive = {};
directive.restrict = 'E';
directive.template = '<span>Shape Name: {{shape.Name}}, Shape Area: {{shape.Area}}</span>';
directive.scope = {
shape: "=name"
};
return directive;
});
app.directive('shapes',
function () {
var controller = [
'$scope', '$http', function ($scope, $http) {
$scope.height = 0, $scope.width = 0;
$http.get('/api/Values').then(function (respnse) {
$scope.shapes = respnse.data;
});
$scope.addShape = function () {
$http.post('api/Values', { Width: 1, Height: 1 }).then(function (res) { });
};
}
];
var directive = {};
directive.restrict = 'E';
directive.template = '<div ng-repeat="shape in shapes"><shape name="shape"></shape></div>' +
'<div>Height:<input type="text" ng-model="height"></input>, Width:<input type="text" ng-model="width"></input>' +
'<button ng-click="addShape()">Add Shape</button></div>';
directive.controller = controller;
return directive;
});
My problem - in the $scope.addShape function, $scope is not defined. Why? $http is defined and working well.