angularjs - Disable access to $scope and stop manipulation from the console

Question

I have a web-page in AngularJS and I want to perform some validations on the client-side itself. So I compare the $scope's values and validate the user's events. For example:

$scope.limit = 5;
$scope.reached = 5;
$scope.check = function () {
    if ($scope.reached >= $scope.limit) {
        alert("Sorry, limit reached.");
    } else {
        alert("Success!");
    }
};

But, it is possible to access and change the $scope with after selecting the element in Elements tab and then running this command in the Console:

angular.element($0).scope().limit = 100;
//or by running $scope.limit = 100; if you're using Batarang

After running this command successfully, I will get the alert as Success. I have created a sample page for testing purpose: http://keval5531.github.io/angular.html

So, is it possible to disable access or manipulation to the $scope? I can always use the server for validating, but I am sure there must be some way to keep a fool-proof client-side validation.

EDIT: I mean something near to fool-proof, which would require more efforts and expertise for the user to manipulate the data being sent and not just DOM manipulation.

Answer 1

You can never ensure fool proof validation-safety on the client side. But to answer your specific question on whether access to scope can be restricted - Yes, to some extend (with 1.3+). You could disable the debug data that batarang and other plugins uses by disabling the debug info. With that scope() accessor function will no longer be attached on the DOM element. The purpose of this is not for providing safety but it is for performance. Keep your server side validations strong enough to block any such attempt.

.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

However be aware that anybody can reload the app with the debug info from the console with:

angular.reloadWithDebugInfo();