Angular Cookies.remove not working

Question

I have a scenario where I am adding a cookie using normal java-script and trying to retrieve it using angular Cookies service which is working fine. But the removal of the cookie using Cookies service is not working. My JS is like

<script type="text/javascript">
        var app = angular.module('MyApp', ['ngCookies']);
        app.controller('MyController', function ($scope, $window, $cookies) {
            $scope.ReadCookie = function () {
                $window.alert($cookies.get('username'));
            };
            $scope.RemoveCookie = function () {
                $cookies.remove('username');
            };

        });
         function addCookie(){
                document.cookie="username=John Doe;path=/";
            }
    </script>

My HTML is

<div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Write Cookie" onclick="addCookie()"/>
        <input type="button" value="Read Cookie" ng-click="ReadCookie()" />
        <input type="button" value="Remove Cookie" ng-click="RemoveCookie()" />
    </div>

Is it related to the path of the cookie, if yes how can i mention the path in the remove function ?