How do I fire fabric.js 'object: moving' event when object is being dragged on a canvas?

I am currently developing an application using the fabric.js library where I draw a rectangle object on a fabric.js canvas which has an image background set on it. I can draw the rectangle but then when I click on the rectangle to move it, the 'object:moving' event does not get fired at all and a new rectangle gets drawn while the current selected one is being moved. Is there a way to stop drawing a new rectangle object while moving the current selected one? Below is my JavaScript code. $scope.c is the canvas variable in scope.

$scope.c.on('mouse:down', function (e) {
                          $scope.isDown = true;
                          $scope.origY = e.e.offsetY;
                          $scope.origX = e.e.offsetX;

                          $scope.rect = new fabric.Rect({
                              top: $scope.origY,
                              left: $scope.origX,
                              width: 0,
                              height: 0,
                              fill: 'gold',
                              stroke: 'red',
                              strokewidth: 4.5,
                              opacity: 0.5,
                              name: 'UserArea_'
                          });

                          $scope.c.add($scope.rect);

                      });

                      $scope.c.on('mouse:move', function (o) {
                          if (!$scope.isDown) { return };

                          var pointer = $scope.c.getPointer(o.e);

                          if ($scope.origX > pointer.x) {
                              $scope.rect.set({ left: Math.abs(pointer.x) });
                          }
                          if ($scope.origY > pointer.y) {
                              $scope.rect.set({ top: Math.abs(pointer.y) });
                          }

                          $scope.rect.set({ width: Math.abs($scope.origX - pointer.x) });
                          $scope.rect.set({ height: Math.abs($scope.origY - pointer.y) });
                          $scope.rect.setCoords();

                      });

                      $scope.c.on('mouse:up', function (o) {
                          $scope.isDown = false;
                      });

                      $scope.c.on('object:selected', function (e) {
                          var activeObj = $scope.c.getActiveObject();
                          {
                              console.log(activeObj.width);
                          }

                      });

                      $scope.c.on('object: moving', function (e) {


                              console.log('object is moving');

                      });