Basic Apache rewrite rules for enabling HTML 5 state links in an AngularJS app with ui-router

Question

I have my web application structured as follows -

http://integration.web-url.com/app1 and http://integration.web-url.com/app2

My application is an angularJS application that has html 5 state links enabled. I've followed the pattern explained here - AngularJS: can't get html5 mode urls with ui-route $state

as follows

<IfModule mod_rewrite.c> 
RewriteEngine on 
<Directory "${POTD}/htdocs"> 
# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule ^ - [L] 

# Rewrite everything else to index.html to allow html5 state links 
RewriteRule ^(.*)app1(.*) app1/index.html [L] 
RewriteRule ^(.*)app2(.*) app2/index.html [L] 
</Directory> 
</IfModule> 

But I get a 404 error when attempting to goto any url other than app1/index.html or app2/index.html