AngularJS HTML5 Mode URL Rewrite to www. Version

I am hosting my AngularJS site in Azure, but running into issues when I only want to perform a URL rewrite to the www. version. I am using HTML5 mode for routing.

If I have the following web.config and refresh the page I get an error stating "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
  <rules>
    <clear/>
    <rule name="WWW Rewrite" enabled="true">
      <match url="(.*)"/>
      <conditions>
        <add input="{HTTP_HOST}" negate="true" pattern="^www\."/>
      </conditions>
      <action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" appendQueryString="true" redirectType="Permanent"/>
    </rule>
  </rules>
</rewrite>
  </system.webServer>
</configuration>

If I leave my web.config as follows, I have no issues with refreshing, but I can't redirect to the www. version of my site:

<configuration>
    <system.web>
  <compilation debug="true" targetFramework="4.5" />
  <httpRuntime targetFramework="4.5" />
</system.web>
  <system.webServer>
<rewrite>
  <rules>
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>
  </system.webServer>
</configuration>

How can I have both scenarios working together?