$http.post returning 404 when posting large text

Question

I have an AngularJS app that talks to an ASP.NET Web API. In one of my forms, when I post a small amount of text it works perfectly. But when I post a large amount of text, I get a 404 error.

I have updated my Web API's request filtering settings to:

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="10485760" />
    </requestFiltering>
  </security>
</system.webServer>

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="51200" timeout="3600" />
    </system.web>
</configuration>

but this has made no difference.

Web API:

[HttpPost]
    [Route("api/notifications/")]
    public Notification UpdateNotification([FromBody]Notification 
notification)
    {
        var toReturn = 
_notificationService.UpdateNotification(notification);
        return toReturn;
    }

Javascript method to invoke Web API:

function updateNotification(notification) {
        return $http.post(appConfig.apiUrl + '/notifications/', 
JSON.stringify(notification))
            .then(updateNotificationComplete)
            .catch(function (message) {
                exception.catcher('XHR Failed for updateNotification')
(message);
            });

        function updateNotificationComplete(data, status, headers, config) {
            return data.data;
        }
    }

Javascript call:

dataservice.updateNotification(vm.notification).then(function (data) {
                    if (data !== "error") {
                        if (!vm.notification.Id || vm.notification.Id <= 0) 
{
                            vm.notification.Id = data;
                            vm.notificationId = data;
                        }
                        logger.success("Save successful");
                    }
                });

Any guidance would be appreciated!